<!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=""></iframe> <iframe id="NextPage" src=""></iframe> </body> </html>
<!DOCTYPE html> <html> <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" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <style type="text/css"> * { box-sizing: border-box; } html { height:100%; border:0px; margin:0px; padding:0px; overflow:hidden; -webkit-perspective:1000px; perspective:1000px; background-color:White; } body { width:100%; height:100%; border:0px; margin:0px; padding:0px; overflow:hidden; } #Page { width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0px; } #NextPage { width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0px; display:none; } .PageTransitionPlay { -webkit-animation:PageTransitionPlay 0.25s; animation:PageTransitionPlay 0.25s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; perspective-origin: 0 50%; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .PageTransitionOver { -webkit-animation:PageTransitionOver 0.25s; animation:PageTransitionOver 0.25s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #Menu { position:fixed; bottom:0px; padding:0px; margin:0px; } button { height:40px; } @-webkit-keyframes PageTransitionPlay /* Safari and Chrome */ { to{-webkit-transform:rotateY(90deg);} from{-webkit-transform:rotateY(0deg);} } @-webkit-keyframes PageTransitionOver /* Safari and Chrome */ { to{-webkit-transform:rotateY(360deg);} from{-webkit-transform:rotateY(270deg);} } @keyframes PageTransitionPlay { to{transform:rotateY(0deg);} from{transform:rotateY(90deg);} } @keyframes PageTransitionOver { to{transform:rotateY(360deg);} from{transform:rotateY(27deg);} } </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("PageTransitionPlay"); $("#NextPage").attr("src", Page); setTimeout(function () { $("#Page").hide().remove(); $("#NextPage").show().attr("id", "Page"); $("Body").addClass("PageTransitionOver"); $("Body").append('<iframe id="NextPage" src=""></iframe>'); setTimeout(function () { $("Body").removeClass("PageTransitionPlay"); $("Body").removeClass("PageTransitionOver"); }, 250); }, 250); }</script> </head> <body> <iframe id="Page" src=""></iframe> <iframe id="NextPage" src=""></iframe> </body> </html>
因为使用JQueryMObile的时候页面的脚本总是不像自己想的运行，于是自己干脆使用Iframe写了页面过渡效果
将ID为Page的Iframe的Src链接设置为首页地址就OK了
在Iframe中页面调用PageTransition()函数就可以旋转过渡页面了
第一个效果类似卷轴展开
第二个效果为翻页