TwentyTwenty – 使用 jQuery 实现图片对比功能

这是一款非常棒的图片对比工具，能够方便的应用到你的网站中。其基本思路是把两张图片层叠在一起，当你拖动滑竿的时候，利用 CSS clip 裁剪图片，进行形成视觉对比效果。

您可能感兴趣的相关文章

• Metronic – 基于 Bootstrap 响应式后台管理模板
• HTML Inspector – 帮助你编写高质量 HTML 代码
• Popline：帅气的浮动 HTML5 文本编辑器工具栏
• Selectize – 用于标签和下拉列表功能的选择控件
• S Gallery – 很有特色的响应式 jQuery 相册插件

 

 

很酷的工具，去看看

 

使用方法非常简单，HTML 示例代码：

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

JavaScript 示例代码：

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

 

您可能感兴趣的相关文章

• Verlet-js：超炫的开源 JavaScript 物理引擎推荐
• Transit – 超平滑的 CSS 过渡和变换动画效果插件
• Debuggex – 超好用的正则表达式可视化调试工具
• -prefix-free：帮你从 CSS 前缀的地狱中解脱出来
• Zepto.js – 为现代浏览器而生的轻量JavaScript库

 

本文链接：TwentyTwenty:使用 jQuery 对比两张图片的差别

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源