0

我正在使用简单window.location的从一个页面导航到另一个页面。

如何使用幻灯片效果导航页面window.location？

（尝试使用 JQuery mobile，但它增加了沉重的页面大小和 ui 在应用程序中令人不安。）

你能就此提出建议吗？

先感谢您。

4

2 回答 2

1

如果您正在寻找滑动效果，请查看 CSS3。它具有易于使用的转换调用，允许您用很少的代码滑动视图。例如：

 //css
 .firstpage{
 height:100%;
 width:100%;
 transition: all 2s;
}
 .movefirstpage{
 left:100%;
 }

 //js
 $(".firstpage").addClass(".movefirstpage");

基本上这将做的是将第一页滑到屏幕左侧。您可以使用相同的逻辑将新页面滑到屏幕上。

另请查看此链接： http ://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/

于 2013-10-11T16:42:20.653 回答
1

只使用 jquery，并在 document.ready 函数中使用 jquery 库中的效果。

例如：

$(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(2000);
});

如果你在页面上给出这个，页面加载会很慢，这只是使用 jquery 库，没有其他插件。

对于重定向：

$("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(1000, redirectPage(linkLocation));     
});

function redirectPage(link) {
    window.location = link;
}

希望你能明白。

您可以在以下位置查看完整详细的说明：http ://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

快速示例：http ://www.onextrapixel.com/examples/jquery-page-transitions/index.php

于 2013-10-11T11:48:03.870 回答