jQuery图片滑动对比插件twentytwenty
简介
twentytwenty 和 Covering-Bad 一样，也是一款滑动对比插件，它也支持水平方向和垂直方向、支持设置前后对比区域大小。
twentytwenty 和 Covering-Bad 的实现原理类似，也是两张图片叠在一起，不同的是 Covering-Bad 是改变宽度或高度，而 twentytwenty 是使用 CSS clip:rect 进行裁切。关于 CSS clip:rect，你可以参考：CSS clip:rect矩形剪裁功能及一些应用介绍。
兼容
浏览器兼容：兼容 IE6 及以上版本和其他主流浏览器，但使用了一些 CSS3 属性，IE 低版本效果欠佳。
jQuery 兼容：兼容 1.7 及以上版本。
使用方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.event.move.js"></script> <script src="js/jquery.twentytwenty.js"></script>
jquery.event.move.js 用于支持移动设备。
2、HTML
<div class="twentytwenty-container"> <img src="//www.dowebok.com/img/2.jpg" alt=""> <img src="//www.dowebok.com/img/1.jpg" alt=""> </div>
3、JavaScript
$(function(){
$('.twentytwenty-container').twentytwenty();
});
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| default_offset_pct | 浮点数 | 0.5 | 默认对比区域大小 |
| orientation | 字符串 | horizontal | 方向，可选 horizontal（水平方向）或 vertical（垂直方向） |
