视觉差异化对比工具:TwentyTwenty

TwentyTwenty是一个视觉差异化对比工具，主要用来展示两个图像之间的视觉差异，只需拖动滑块即可看到图像之间的对比。使用非常简单，兼容PC端和移动端。

原理

TwentyTwenty的工作原理是将两个图像堆叠在一起，当滑块在图像上移动时，使用CSS的clip属性来裁剪左侧的图像。该插件还使用了jquery.event.move库来支持移动设备。

配置

只需将两个图像包装在一个容器中即可。第一张图片在左侧，第二张在右侧。示例：

<div  id = "container1" > 
  <img  src = "sample-before.png" > 
  <img  src = "sample-after.png" > 
</div> 

然后在图像加载后调用twentytwenty() :

$(window).load(function() {
  $("#container1").twentytwenty();
});

防止无样式内容闪烁(FOUC)

只需将 twentytwenty-container 类添加到你的图像容器。

<div id="container1" class="twentytwenty-container">
  <img src="sample-before.png">
  <img src="sample-after.png">
</div>

JavaScript 选项

你可以将以下选项传递给TwentyTwenty：

Name	默认值	描述
default_offset_pct	0.5	默认滑块离左侧多远

依赖关系

• jQuery
• jquery.event.move ：用于支持移动设备上的触摸事件。