码迷,mamicode.com
首页 > Web开发 > 详细

基于Jquery的旋转过渡页面(原创)

时间:2014-12-17 16:16:25      阅读:156      评论:0      收藏:0      [点我收藏+]

标签: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()函数就可以旋转过渡页面了

基于Jquery的旋转过渡页面(原创)

标签:style   blog   http   ar   io   color   使用   sp   for   

原文地址:http://www.cnblogs.com/CielWater/p/4169509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!