Question

我有两个html页面：Page1.html，Page2.html。我想在这两页之间滑动。我发现很多插件和解决方案可以在两个div之间滑动或在容器内滑动，但我需要的是完整的页面更改。

I found something但问题是第2页的jquery代码在页面加载时不会触发。我可以使用jQuery mobile但我的项目使用jQuery ui并且它给了我一些冲突......所以我需要别的东西。

该项目应该在iPad上运行，因此拥有可以拖动的滑动页面会很酷。但我很乐意为幻灯片找到一个插件。

谢谢。

Answer 1

你有很少的解决方案，比如使用Ajax将内容添加到“新页面”并使用jQuery添加一些滑动效果。 Stack Overflow上有一些关于它的主题：

slide between pages using jQuery

Clues on sliding between pages effect

或者只是在页面就绪中添加一些效果，如下例所示：

<html>
<head>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('body div').slideDown();
        });
    </script>
</head>
<body>
    <div style="width: 400px; height: 400px; background-color: blue; display: none;">
        <a href="page2.htm" style="color: white;">PAGE 2>></a>
    </div>
</body>

<html>
<head>
    <script src="js/jquery-1.7.2.min.js"></script>      
    <script>
        $(document).ready(function(){
            $('body div').slideDown();
        });
    </script>
</head>
<body>
    <div style="width: 400px; height: 400px; background-color: red; display: none;">
        <a href="page1.htm" style="color: white;">PAGE 1>></a>
    </div>
</body>

祝你好运！

Answer 2

我一直在寻找一个完整的页面转换，而不是那些显示带有几个DIV的页面的示例。我发现Animate.css非常有效。

Demo at this link.

JS或Css页面幻灯片在2个完整页面之间转换

2 个答案: