基于Jquery的旋转过渡页面

浏览数：18 / 时间：2015年06月09日

<!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>