注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery视差插件应用TwentyTwenty

jQuery插件 fishcity 804浏览

 

需要突出显示两个图像之间的差异吗?是不是苦苦找寻了很久都没找到好的方法以,这下您有福了,TwentyTwenty,这款jQuery视差插件应用,可以轻松地帮您解决问题 !下面来看下使用方法。

它是如何工作的

TwentyTwenty的工作原理是在彼此的顶部堆叠的两个图像。当滑块在整个图像移动,它使CSS的使用剪辑属性来裁剪图像左侧,这允许在右侧的图像通过容器来显示。当然我们需要使用到jquery.event.move库,以便支持在移动设备上1:1滑块运动。

使用方法

TwentyTwenty非常容易上手,只是包装容器内的两个图像。所述第一图像将在左侧,第二个将在右边。下面是一个容器例子:

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

然后写入JS调用twentytwenty()方法,使这绑定的容器加载图像:

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

防止FOUC

如果你想防止FOUC时,只需添加twentytwenty容器类的容器,像这样:

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

JavaScript 选项

您可以将以下选项传递给TwentyTwenty:

名称                           默认值        描述

default_offset_pct      0.5               如何远离左滑块应在默认情况下

依赖项

本插件依赖于以下两个JS库方可运行:

jquery

jquery.event.move: 用于在移动设备上支持触摸事件。

转载请注明:jQ酷 » jQuery视差插件应用TwentyTwenty

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。