TwentyTwenty通过叠加两张图片来实现这种拖动滑块切换图片的效果。在滑块移动时,通过css来控制图片的样式,使得图片产生一种重叠的错觉。
HTML结构
<div id="container1">
<img src="sample-before.png">
<img src="sample-after.png">
</div>
调用方法
通过 twentytwenty()来调用这个插件
$(window).load(function() {
$("#container1").twentytwenty();
});