twentytwenty 是一款基于 jQuery 的滑动对比插件,它也支持水平方向和垂直方向、支持设置前后对比区域大小。twentytwenty 的实现原理是两张图片叠在一起,然后是使用 CSS clip:rect 进行裁切。
用法示例
1、HTML
<div id="container1"> <!-- The before image is first --> <img src="http://placehold.it/400x200&text=1" /> <!-- The after image is last --> <img src="http://placehold.it/400x200&text=2" /> </div>
2、JavaScript
$(function(){ $('.twentytwenty-container').twentytwenty(); });
查看演示
浏览器支持:
IE8+
Firefox (latest)
Chrome
Safari
Android
iOS (iPhone, iPad)