Question

使用： jquery Mobile 1.4.5

我想知道以下是否可行，如果可行，请开始使其正常运行。

目前有4个页面div使用滑动在它们之间导航（水平过渡）

我希望当你沿着容器移动时，一个长的背景稍微移动（到页面宽度）。赋予外观平滑的滚动体验，让更多的背景充满活力。

可能以错误的方式解决这个问题但是会喜欢一些提示。

干杯！

Answer 1

可以通过将background-image设置为body或将div设置为

来实现这一目标。

如果将其设置为body，您将在转换期间获得动画背景。在这种情况下，你必须制作页面div transparent。

body {
  background-image: url(image.png);
}
.ui-page {
  background: transparent !important;
}

导航pagecontainerbeforechange后，获取您导航到的页面的index()，并按屏幕/窗口宽度对其进行多次设置，以设置背景background-position-x的新位置。

在第一页上，background-position-x为0，我们应保持原样。在pagecontainercreate我们添加pagecontainerbeforechange侦听器以获取导航到的页面用户的index()。

$(document).on("pagecontainercreate", function () {
    $(document).on("pagecontainerbeforechange", function (e, data) {
        if (typeof data.toPage == "object") {
            var index = data.toPage.index(),
                screenWidth = window.innerWidth;
            $("body").animate({
                'background-position-x': "-" + screenWidth * index + "px"
            });
        }
    });
});

<强> Demo

另一个选项是将background-image设置为分页和每个pagecreate，我们也会根据页面的background-position-x设置index()。

.ui-page {
  background-image: url(image.png);
}

$(document).on("pagecreate", function (e) {
    var index = $(e.target).index(),
        screenWidth = window.innerWidth;
    $(e.target).css({
        "background-position-x": "-" + screenWidth * index + "px"
    });
});

<强> Demo

多个页面背景＆＃34;滚动＆＃34;

1 个答案: