首页 > 代码库 > 基于Jquery的旋转过渡页面(原创)
基于Jquery的旋转过渡页面(原创)
<!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()函数就可以旋转过渡页面了
基于Jquery的旋转过渡页面(原创)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。