twentytwenty - 图片对比插件

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

淘建站为您提供更多_图片代码_图片插件_twenty_对比，在此特别感谢您对我们的支持与厚爱！

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