twentytwenty - 图片对比插件

twentytwenty 是一款图片对比插件，它也支持水平方向和垂直方向、支持设置前后对比区域大小。原理主要通过 CSS clip:rect 进行裁切。本文将演示水平和垂直两种对比效果。

分类：图片代码 > 图片插件难易：初级

查看演示下载资源下载积分： 20 积分

HTML

首先我们现在页面上放置两个对比图片

<div class="twentytwenty-container">
	<img src="img/2.jpg" alt="">
	<img src="img/1.jpg" alt="">
</div>

接着引入jQuery、jquery.event.move.js及jquery.twentytwenty.js。

<script type="text/javascript" src="jquery.js"></script> 
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>

调用twentytwenty插件：

$(function(){
	$('.twentytwenty-container').twentytwenty();
});

twentytwenty相关API

参数	描述	默认值
default_offset_pct	默认对比区域大小	0.5
orientation	方向，可选 horizontal（水平方向）或 vertical（垂直方向）	horizontal