twentytwenty-jQuery滑动对比插件

  • 授权协议:GPL
  • 开发厂商:未知
  • 开发语言:js
  • 收录时间:2021-01-23
  • 操作系统:Windows,Linux,OS X
  • 软件作者:zurb
  • 开源标签: twentytwenty

软件介绍

twentytwenty 是一款基于 jQuery 的滑动对比插件,它也支持水平方向和垂直方向、支持设置前后对比区域大小。twentytwenty 的实现原理是两张图片叠在一起,然后是使用 CSS clip:rect 进行裁切。

twentytwenty 是一款基于 jQuery 的滑动对比插件,它也支持水平方向和垂直方向、支持设置前后对比区域大小。twentytwenty 的实现原理是两张图片叠在一起,然后是使用 CSS clip:rect 进行裁切。

用法示例

1、HTML

<div id="container1"> <!-- The before image is first --> <img src="http://placehold.it/400x200&text=1" /> <!-- The after image is last --> <img src="http://placehold.it/400x200&text=2" /></div>

2、JavaScript

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

查看演示

浏览器支持:

  • IE8+

  • Firefox (latest)

  • Chrome

  • Safari

  • Android

  • iOS (iPhone, iPad)

上一篇:Midnight.js

下一篇:jQueryFullScreenPlugin

相关阅读

查看更多 >