JS或Css页面幻灯片在2个完整页面之间过渡 [英] JS or Css page slide transition between 2 full pages
问题描述
我有两个html页面：Page1.html，Page2.html。
我想在两个页面之间滑动。我发现很多插件和解决方案在两个div之间滑动或在容器内滑动，但我需要的是一个完整的页面更改。
I have two html pages: Page1.html, Page2.html. I would like to slide between the two pages. I have found a lot of plugins and solutions to slide between two divs or slide within a container but what I need is a complete page change.
我发现了一些东西，但问题是page2的jquery代码不会在页面加载时触发。我可以使用jQuery移动，但我的项目使用jQuery ui，它给我一些冲突...所以我需要别的东西。
I found something but the problem is that jquery code on page2 does not fire when the page loads. I could use jQuery mobile but my project uses jQuery ui and it gives me some conflicts... so I need something else.
项目应该在iPad上运行它会很酷有滑动页面，你可以拖动。
The project is supposed to run on iPad so it would be cool to have sliding pages that you can drag. But I would be happy to just find a plugin for the slide.
谢谢。
推荐答案
您有几个解决方案，例如使用Ajax将内容添加到新页面，并使用jQuery添加一些滑动效果。有关Stack Overflow的一些主题：
You have few solutions, like using Ajax for adding content to "new pages" and add some sliding effect with jQuery. There is some topics about that on Stack Overflow:
Clues on sliding between pages effect
或者只是在页面上添加一些效果，就像这个示例：
Or just add some effect on page ready like in this sample:
<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>
祝你好运！
这篇关于JS或Css页面幻灯片在2个完整页面之间过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
