标签：style blog http ar io color 使用 sp for
<!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()函数就可以旋转过渡页面了
标签：style blog http ar io color 使用 sp for
原文地址：http://www.cnblogs.com/CielWater/p/4169509.html
