jQuery视差插件ImageScroll

 查看演示  website  立即下载

jQuery和AMD兼容的插件用图片来创建一个视差效应。

这个插件是非常简单的使用有一些选项的修改。它利用CSS3动画,支持落回顶部和老的浏览器。（没有视差效应和小图像尺寸的触屏设备，详见。接触部分）

使用方法

标记

标记可以包含尽可能多的图像元素，只要你想，但你应该把它们与内容分开，如下代码。

<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>

初始化

要初始化插件，把它们应用到你想要的元素

$('.img-holder').imageScroll();

AMD

这个插件是AMD兼容。与RequireJS使用，你可以做到这一点。见演示文件的例子。

require ([ 'jquery.imageScroll' ],  function  ( ImageScroll )  { 
    $ ( '.img-holder' ). each ( function  ()  { 
        new  ImageScroll ( this ). init (); 
    }); 
});

选项

您可以配置默认的选项，通过传递一个选项对象插件进行调整

$('.img-holder').imageScroll({
    coverRatio: 0.5
});

通过数据属性，数据集的选项optionname图像，宽度（mediaWidth），高度（mediaHeight），覆盖率（coverRatio），额外的高度（extra-height）

<div class="img-holder" data-image="anImage.jpg" data-cover-ratio="0.5"></div>

或全局设置选项

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的）这样做，并设置动态选择，以适应这一点。

var touch = Modernizr.touch;
$('.img-holder').imageScroll({
    imageAttribute: (touch === true) ? 'image-mobile' : 'image',
    touch: touch
});

要求

jQuery的版本1.8.0或更高版本

PREVIOUS:
NEXT:
jQuery旋钮(推荐)
frescojs一个美丽的响应灯箱插件