JS或CSS页面滑动转换两个完整页面

Question

JS或CSS页面滑动转换两个完整页面

9

我有两个html页面：Page1.html，Page2.html。我想在这两个页面之间进行滑动切换。我找到了很多插件和解决方案来在容器内滑动或在两个div之间滑动，但我需要的是完全的页面更改。我找到了一些东西，但问题在于当页面加载时，Page2上的jquery代码不会触发。我可以使用jQuery mobile，但我的项目使用jQuery ui，它会给我带来一些冲突...所以我需要其他东西。

该项目应在iPad上运行，因此最好有可拖动的滑动页面。但如果能找到一个幻灯片插件，我也会很高兴。

谢谢。

- Lince81

你是在寻找移动端的解决方案还是桌面端的？还是两者都需要？ - Kami

最终你选择了什么？我正在面临同样的问题，而且不想使用 jQuery，因为我需要加载 HTML 头部。我认为我会使用 CSS。 - Maxbester

2个回答

0

我正在寻找一个完整的页面过渡效果，而不是只显示几个DIV的许多示例。我发现Animate.css非常适合这个任务。

在此链接中查看演示。

- Elim Garak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- X-spert · Accepted Answer

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

使用jQuery在页面之间滑动

滑动页面效果的线索

或者只需要在页面准备就绪时添加一些效果，就像这个示例一样：

<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>

祝你好运！