TwentyTwenty通过叠加两张图片来实现这种拖动滑块切换图片的效果。在滑块移动时，通过css来控制图片的样式，使得图片产生一种重叠的错觉。

HTML结构

<div id="container1">
  <img src="sample-before.png">
  <img src="sample-after.png">
</div>
                

调用方法

通过 twentytwenty()来调用这个插件

$(window).load(function() {
  $("#container1").twentytwenty();
});
                

更多信息：http://zurb.com/playground/twentytwenty

在线预览    源码下载