<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport">
<style type="text/css">
*
{
box-sizing: border-box;
}
Body
{
width:350px;
height:100%;
border:0px;
margin:0px;
padding:0px;
}
#Page
{
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
}
#NextPage
{
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
display:none;
}
.PageTransition
{
-webkit-animation:PageTransition 0.25s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:2;
}
@-webkit-keyframes PageTransition /* Safari and Chrome */
{
to{-webkit-transform:rotateY(90deg);}
from{-webkit-transform:rotateY(0deg);}
}
</style>
<script src="../Script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//旋转过渡页面(Page为跳转链接地址)
//来自：http://www.cnblogs.com/cielwater
function PageTransition(Page) {
$("Body").addClass("PageTransition");
$("#NextPage").attr("src", Page);
setTimeout(function () {
$("#Page").hide().remove();
$("#NextPage").show().attr("id", "Page");
$("Body").append(‘<iframe id="NextPage" src=""></iframe>‘);
setTimeout(function () {
$("Body").removeClass("PageTransition");
}, 250)
}, 250);
}
</script>
</head>
<body>
<iframe id="Page" src="Main.aspx"></iframe>
<iframe id="NextPage" src=""></iframe>
</body>
</html>
因为使用JQueryMObile的时候页面的脚本总是不像自己想的运行，于是自己干脆使用Iframe写了一个页面过渡效果
将ID为Page的Iframe的Src链接设置为首页地址就OK了
在Iframe中页面调用PageTransition()函数就可以旋转过渡页面了
时间： 2024-08-02 20:16:19