jquery移动多页视差

Question

我使用jqm 1.4构建一个页面，并且想要在div内容层中只使用一个页面的视差效果，但我找不到支持jqm多页的插件。知道某人的解决方案吗？

问候，克里斯

Answer 1

  

这是 DEMO

它使用名为skrollr的插件：https://github.com/Prinzhorn/skrollr/tree/master/examples#examples

在演示中，page1具有视差效果，第2页是正常的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
    });
});