基于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 >);
                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 >);
                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()函数就可以旋转过渡页面了

第一个效果类似卷轴展开

第二个效果为翻页

基于Jquery的页面过渡效果(原创)

相关推荐