jquery移动多页视差

Question

我使用 jqm 1.4 构建了一个页面，并希望仅对 div 内容层中的一个页面使用视差效果，但我找不到支持 jqm 多页面的插件。有人知道解决方案吗？

问候，克里斯

Answer 1

这是一个DEMO

它使用名为 skrollr 的插件，可在此处找到：https://github.com/Prinzhorn/skrollr/tree/master/examples#examples

在demo中，page1有视差效果，page2是一个普通的jQM页面。在第一页中，内容 DIV 具有 skrollr 插件使用的背景图像和数据属性：

<div data-role="content" id="theContent" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">

#theContent{
    background:url(http://prinzhorn.github.io/skrollr/examples/images/bubbles.png) repeat fixed;
}

在内容 div 中是一个居中的 div，具有一定的背景透明度，因此图像可以显示出来。最后在page1 pageinit我们初始化视差效果：

$(document).on("pageinit", "#page1", function(){
    skrollr.init({
        forceHeight: false
    });
});