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

时间：2022-06-02 20:33:07
<!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=""></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 id="NextPage" src=""></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()函数就可以旋转过渡页面了

第一个效果类似卷轴展开

第二个效果为翻页

相关文章