jQuery和AMD兼容的插件用图片来创建一个视差效应。
这个插件是非常简单的使用有一些选项的修改。它利用CSS3动画,支持落回顶部和老的浏览器。（没有视差效应和小图像尺寸的触屏设备，详见。接触部分）
使用方法
标记
标记可以包含尽可能多的图像元素，只要你想，但你应该把它们与内容分开，如下代码。
1 2 3 4 5 | <div class="img-holder" data-image="anImage.jpg" data-width="1600" data-height="900"></div> <section><p>Content that "slides" on top of the images</p></section><div class="img-holder" data-image="anotherImage.jpg" data-width="1600" data-height="900"> [optional content to be displayed on top of the images]</div> |
初始化
要初始化插件，把它们应用到你想要的元素
1 | $('.img-holder').imageScroll(); |
AMD
这个插件是AMD兼容。与RequireJS使用，你可以做到这一点。见演示文件的例子。
1 2 3 4 5 | require ([ 'jquery.imageScroll' ], function ( ImageScroll ) { $ ( '.img-holder' ). each ( function () { new ImageScroll ( this ). init (); }); }); |
选项
您可以配置默认的选项，通过传递一个选项对象插件进行调整
1 2 3 | $('.img-holder').imageScroll({ coverRatio: 0.5}); |
通过数据属性，数据集的选项optionname图像，宽度（mediaWidth），高度（mediaHeight），覆盖率（coverRatio），额外的高度（extra-height）
1 | <div class="img-holder" data-image="anImage.jpg" data-cover-ratio="0.5"></div> |
或全局设置选项
1 | ImageScroll.defaults.coverRatio = 0.5; |
可配置的选项：
image：图像显示（默认值= null）
imageattribute：数据属性名称的图像。使用此属性的值加载图像（默认值=‘image’）
container:视差图像（s）将连接（默认值= $（'body’））
speed：速度的视差效应。一个浮点数0和1之间，在高数量的移动图像的速度向上（默认值= 0.2）
coverratio：百分之多少屏幕的每个图像应覆盖（默认值= 0.75）
holderminheight：在图像中的像素的最小高度（默认值= 200）
extraheight：额外的高度增加到图像。如果你想表现出更多的顶端图像（默认值= 0）
mediawidth：图像的原始宽度（默认值= 1600）
mediaheight：图像的原始高度（默认值= 900）
parallax：你是否想要的视差效应，如不在古老的浏览器工作的很好（默认值= TRUE）
touch：一种手机/平板电脑friendy版本，没有视差效果和较小的图像（与移动/平板电脑优化的图像使用）（默认= false）
触摸
效果是不是触摸屏设备上非常流畅。因此，你可以提供给用户一个备用版本，它没有视差效果显示图像。您可以通过检查触摸（例如使用Modernizr的）这样做，并设置动态选择，以适应这一点。
1 2 3 4 5 | var touch = Modernizr.touch;$('.img-holder').imageScroll({ imageAttribute: (touch === true) ? 'image-mobile' : 'image', touch: touch}); |
要求
jQuery的版本1.8.0或更高版本
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery图片展示插件SuperBox
- 下一个特效： jQuery旋钮(推荐)