jq图片滑动对比插件twentytwenty jquery 图片左右滚动

在最近切图网的一个h5手机的前端外包项目中就用到了这个效果，最关键的是它支持移动设备。

TwentyTwenty的工作原理是在彼此的顶部堆叠的两个图像。当滑块在整个图像移动，它使CSS的使用剪辑属性来裁剪图像左侧,这允许在右侧的图像通过容器来显示。

我们正在使用的自定义运动事件jquery.event.move库，以支持在移动设备上1:1滑块运动。

保用方法

TwentyTwenty非常容易上手，只是包装容器内的两个图像。所述第一图像将在左侧，第二个将在右边。下面是一个容器例子：

<div id="container1">

<img src="sample-before.png">

<img src="sample-after.png">

</div>

然后调用twentytwenty()这个容器加载图像：

$(window).load(function() {

$("#container1").twentytwenty();

});

演示地址

http://www2.qieban.cn/z/twentytwenty/

---

切图网（qietu.com）国内首家前端公司，专注psd转html5/ pc、h5、响应式等前端开发服务。