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