Beer Slider一款轻量级的图片对比插件

所属分类:媒体-图像

 28531  358  查看评论 (0)
分享到微信朋友圈
X
Beer Slider一款轻量级的图片对比插件 ie兼容11

Beer Slider如何使用?

将样式表包含在您的 head:

<link rel="stylesheet" href="BeerSlider.css">

构建您的标记,如下例所示。确保保留类名称,如示例中所示。该data-beer-label属性定义在滑块的上角中显示的标签的文本。如果您不需要标签,请将其取下或留空。

<div id="beer-slider" class="beer-slider" data-beer-label="before">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>

在结束body标记之前包含脚本:

<script src="BeerSlider.js"></script>
<script>
  var slider = new BeerSlider( document.getElementById( "beer-slider" ) );
</script>

您还可以使用start0到100之间的参数将起始位置设置在除中间之外的其他位置。

<script>
  new BeerSlider( document.getElementById( "beer-slider" ), { start: 25 } );
</script>

与jQuery或Zepto一起使用

如果您在项目中使用jQuery或Zepto并在页面上有一些前后滑块,则可以执行以下操作:

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').BeerSlider({start: 25});
</script>

要么:

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').each( (function( index, el ) {
    $(el).BeerSlider({start: $(el).data('beer-start')})
  });
</script>

有:

<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="25">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>
<div id="beer-slider2" class="beer-slider" data-beer-label="before" data-beer-start="75">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>
相关插件-图像

jQuery切图插件(原创)

基于jQuery实现的类似ps切图工具
  图像
 24651  328

移动端图片滤镜效果

在手机上常用到的图片滤镜效果
  图像
 28917  385

jquery.photoClip图片裁剪添加旋转 缩放按钮功能

项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!
  图像
 28854  319

SVG图像生成插件triangloid

triangloid是一个JavaScript库,可以将图像生成为多边形图像并输出成SVG格式。它是基于trianglify
  图像
 31995  335

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复