如何解决HTML 5页面过渡
| 我想在页面之间进行漂亮,现代的过渡。我找到了本教程:http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/ 作者使用JQuery使其工作,但我想在纯HTML5中实现。比如说CSS5中有HTML5的功能吗? 更新 在2014年末,我想添加以下评论。在三思而后行之前,最好制作一个单页AJAX网络应用程序,并在DIV之间使用CSS3过渡。问题描述了一种非常特殊的情况,这种情况极为罕见。在其余99%的情况下,单页应用程序是最佳解决方案。解决方法
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>
, 这是基于上面发布的正确答案,这对我有很大帮助。不幸的是,它在chrome / linux中对我不起作用,在Firefox中效果很好。无论如何,我一直在寻找略有不同的东西,因为我想要在所有页面中使用相同的标题。所以这是我的解决方案。
<html>
<head>
<style>
body,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>
主要说明:
页面不需要有按钮或任何东西,这里是处理程序
是所有页面共有的标题。
href
属性已禁用,因为我们不想真正导航,只是
将ѭ5填充为ѭ6。
现在change()
函数需要一个
参数“ 8”,用于确定要加载的页面;如前所述
在href
属性中传递a
的目的地时,
将其作为函数参数传递给change()
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。