jQuery+css3移动滑块比较图像插件

PetitQ 图片/图形 2018-11-14 1.53K 0 0

这是一款非常实用的 jQuery 和 css3 移动滑块比较图像插件。我们在 jquery 拖动滑块切换图片的图片切换插件和 jquery 通过滑块移动改变图片颜色插件都曾见过类似的效果。

当你制作了一个产品页面，有很多种创建图像效果的方法可以使用户“体验”你的产品。这款移动滑块比较图像插件就是其中之一。你可以去看看 Sony Ultra HD TV 产品页，他们也只用了这个图像特效来展示他们的产品。Google 在他们的 Google+ Photos 使用了这个特效。

也想出现在这里？联系我们吧

HTML 结构

html 结构中使用一个 figure 作为包装容器包住原始图片、修改的图片和滑块。

```
<figure class="cd-image-container">
```

  <img src="img/img-original.jpg" alt="Original Image">

  <span class="cd-image-label" data-type="original">Original</span>

```
 
```

  <div class="cd-resize-img"> <!-- the resizable image on top -->

    <img src="img/img-modified.jpg" alt="Modified Image">

    <span class="cd-image-label" data-type="modified">Modified</span>

```
  </div>
```
```
 
```

  <span class="cd-handle"></span> <!-- slider handle -->

```
</figure> 
```

CSS 样式

.cd-resize-image 开始时宽度设置为 0，然后当它进入浏览器窗口时，宽度变为 50%。我们还使用 cd-bounce-in 动画来创建一种反弹效果。

```
.cd-resize-img {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  height: 100%;
```
```
  width: 0;
```
```
  overflow: hidden;
```

  /* Force Hardware Acceleration in WebKit */

```
  transform: translateZ(0);
```
```
  backface-visibility: hidden;
```
```
}
```
```
.is-visible .cd-resize-img {
```
```
  width: 50%;
```

  /* bounce in animation of the modified image */

```
  animation: cd-bounce-in 0.7s;
```
```
}
```
```
@keyframes cd-bounce-in {
```
```
  0% {
```
```
    width: 0;
```
```
  }
```
```
  60% {
```
```
    width: 55%;
```
```
  }
```
```
  100% {
```
```
    width: 50%;
```
```
  }
```
```
}
```

JAVASCRIPT

为了实现滑块功能，我们为.cd-handle 元素提供了 drags()方法来使它可以被拖动。（参看 CSS-Tricks ）当设备在.cd-handle 元素上按下并拖动时，我们根据当前鼠标的位置来更新.cd-handle 的 left 值。并且改变 div.cd-image-size 的宽度。为了添加移动设备的支持，我们使用了 jQuery mobile（注意：在触摸屏设备上使用 vmouse 事件来模拟 mouse 事件）。

```
jQuery(document).ready(function($){
```

    //function to check if the .cd-image-container is in the viewport here

```
    // ...
```
```
 
```

    //make the .cd-handle element draggable and modify .cd-resize-img width according to its position

    $('.cd-image-container').each(function(){

```
        var actual = $(this);
```

        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual);

```
    });
```
```
 
```

    //function to upadate images label visibility here

```
    // ...
```
```
});
```
```
 
```

//draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/

function drags(dragElement, resizeElement, container) {

    dragElement.on("mousedown vmousedown", function(e) {

        dragElement.addClass('draggable');

        resizeElement.addClass('resizable');

```
 
```

        var dragWidth = dragElement.outerWidth(),

            xPosition = dragElement.offset().left + dragWidth - e.pageX,

            containerOffset = container.offset().left,

            containerWidth = container.outerWidth(),

            minLeft = containerOffset + 10,

            maxLeft = containerOffset + containerWidth - dragWidth - 10;

```
 
```

        dragElement.parents().on("mousemove vmousemove", function(e) {

            leftValue = e.pageX + xPosition - dragWidth;

```
 
```

            //constrain the draggable element to move inside its container

```
            if(leftValue < minLeft ) {
```
```
                leftValue = minLeft;
```

            } else if ( leftValue > maxLeft) {

```
                leftValue = maxLeft;
```
```
            }
```
```
 
```

            widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';

```
 
```

            $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {

                $(this).removeClass('draggable');

                resizeElement.removeClass('resizable');

```
            });
```
```
 
```

            $('.resizable').css('width', widthValue);

```
 
```

            //function to upadate images label visibility here

```
            // ...
```
```
 
```

        }).on("mouseup vmouseup", function(e){

            dragElement.removeClass('draggable');

            resizeElement.removeClass('resizable');

```
        });
```
```
        e.preventDefault();
```

    }).on("mouseup vmouseup", function(e) {

        dragElement.removeClass('draggable');

        resizeElement.removeClass('resizable');

```
    });
```
```
}
```

jQuery+css3 移动滑块比较图像插件

已有 383 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

jQuery+css3移动滑块比较图像插件

HTML 结构

CSS 样式

JAVASCRIPT

jQuery+css3 移动滑块比较图像插件

相关文章

Placeholder 浏览器端生成占位图片的js插件

HTML5变色波浪线条特效代码

鼠标滑过图片遮罩层动画jQuery插件

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

JAVASCRIPT

jQuery+css3 移动滑块比较图像插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复