素材牛

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

 所属分类:网页特效-图片展示

 浏览:223次-  下载:1次-  评论:0次-  发布时间:2018-09-25
一款轻量级的图片色彩对比插件Beer Slider兼容IE11
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:它的基本目的是比较图像的两个版本,例如在两个不同时刻拍摄的相同对象,预编辑的照片及其处理版本,草图和完成的插图等

详细介绍

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>


文件目录结构

  • ┝ aa.jpg
  • ┝ aa.png
  • ┝ bb.jpg
  • ┝ bb.png
  • ┝ BeerSlider.css
  • ┝ BeerSlider.js
  • ┝ index.html

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:1
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证