HTML 5页面转换
我想做一个漂亮的，看起来现代的页面之间的过渡。我找到了这个教程：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
作者使用JQuery使其工作，但我想用纯HTML5来实现。HTML5中是否有这样的特性，比如在CSS中？
更新
在2014年底，我想补充以下评论。在做这件事之前，请三思而后行，在DIVs之间创建一个带有CSS3转换的单页AJAX web应用程序，这不是更好吗？这个问题描述了一个非常特殊的情况，这是非常罕见的。在其他99%的情况下，单页应用程序是最好的解决方案。
回答 2
Stack Overflow用户
发布于 2011-06-16 04:37:01
index.htm：
<html>
<head>
<style>
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }
#mainframe.normal
{
opacity: 1.0;
}
#mainframe.faded
{
opacity: 0.0;
}
#mainframe
{
/* Firefox */
-moz-transition-property: opacity;
-moz-transition-duration: 3s;
/* WebKit */
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
/* Standard */
transition-property: opacity;
transition-duration: 3s;
}
</style>
<script language="javascript">
function change()
{
document.getElementById('mainframe').className="faded";
setTimeout(function()
{
document.getElementById('mainframe').src='page2.htm';
document.getElementById('mainframe').className="normal";
}, (2 * 1000));
}
</script>
</head>
<body style="background-color:black;">
<iframe id="mainframe" class="normal" src="page1.htm"></iframe>
</body>
</html>page1.htm
<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page1
<button onclick="parent.change();">
click me
</button>
</body>
</html>page2.htm
<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page2
</body>
</html>Stack Overflow用户
发布于 2013-09-20 17:25:49
这是基于上述正确的答案，这对我有很大的帮助。不幸的是，它在chrome/linux中并不适用于我，它在firefox中运行得很好。无论如何，我都在寻找一些稍微不同的东西，因为我希望在所有页面中都有一个通用的标题。这是我的解决方案。
<html>
<head>
<style>
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }
#mainframe.normal
{
opacity: 1.0;
}
#mainframe.faded
{
opacity: 0.0;
}
#mainframe
{
/* Firefox */
-moz-transition-property: opacity;
-moz-transition-duration: 3s;
/* WebKit */
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
/* Standard */
transition-property: opacity;
transition-duration: 3s;
}
</style>
<!--<script language="javascript">-->
<script>
function change(page)
{
// document.write('Hello World');
document.getElementById('mainframe').className="faded";
setTimeout(function()
{
document.getElementById('mainframe').src=page+'.html';
document.getElementById('mainframe').className="normal";
}, (2 * 1000));
}
</script>
</head>
<body style="background-color:black;">
<header id="header">
<h2 id="name">
FRANCISCO</br>
FRANCHETTI
</h2>
<nav id="pages">
<ul id="list-nav">
<li class="current"><a onclick="change('home')" href="#">HOME</a></li>
<li><a onclick="change('research')" href="#">RESEARCH</a></li>
<li><a onclick="change('teaching')" href="#">TEACHING</a></li>
<li><a onclick="change('contact')" href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<iframe id="mainframe" class="normal" src="home.html"></iframe>
</body>
</html>主要评论：
页面不需要有按钮或任何东西，这里的处理程序是所有页面共有的标题。由于我们不想真正导航，所以禁用了iframe.
- Now
-
href属性，只需重新填充change()函数的src，该参数page用于确定加载哪个页面；正如前面所说的，我们不是在href属性中传递a的目的地，而是将其作为change().的函数参数传递。
https://stackoverflow.com/questions/6332195
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号