窗口中各模块的切换效果，使用jquery实现

用到了两个js库，请自行下载，用到的背景图片可任意图片都可以，主要是看效果
<!DOCTYPE html>

<html>

<head>

    <script src="js/jquery-1.11.3.min.js"></script><script src="js/jquery.easing.1.3.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            margin: 0 auto;

        }

        #header {

            height: 100px;

            background: #ccc;

        }

        #footer {

            background: #ccc;

            height: 100px;

        }

        #container {

            background: url(body_bg.gif);

            min-height: 400px;

            /*max-height:600px;*/

            position: relative;

        }

        .page {

            position: absolute;

            width: 100%;

            height: 100%;

        }

        .page1 {

            background: url(h.jpg);

        }

        .page2 {

            background: url(a.jpg);

        }

        .page3 {

            background: url(b.jpg);

        }

        .page4 {

            background: url(c.jpg);

        }

    </style>

    <script>

        $(function () {

            var width = $(window).width();

            $('.page').css('left',width+"px");

            $("#container").height($(window).height() - 200);

            $(window).resize(function () {

                $('.page').css('left', width + "px");

                width = $(window).width();

                $("#container").height($(window).height() - 200);

            });

            $("button").each(function (i) {

                i = i + 1

                $("#btn" + i).click(function () {

                    $(".page").stop(false, true).not('.page' + i).animate({ left: -2*width }, 1000, function () {

                        $(".page").not('.page'+i).css("left", width);

                    });

                    $(".page" + i).animate({

                        'left': [0, 'easeOutBack']

                    }, 1000)

                });

            });

        });

    </script>

</head>

<body>

    <div id="header">

        我是头部

        <p>

            <button id="btn1">页面1</button>

            <button id="btn2">页面2</button>

            <button id="btn3">页面3</button>

            <button id="btn4">页面4</button>

        </p>

    </div>

    <div id="container">

        <div class="page page1">

            1111111111111111111111111111111111

        </div>

        <div class="page page2">

            2222222222222222222222222222222222222

        </div>

        <div class="page page3">

            33333333333333333333333333333333333333

        </div>

        <div class="page page4">

            4444444444444444444444444444

        </div>

    </div>

    <div id="footer">

        <p>

            版本信息：：：：：

        </p>

    </div>

</body>

</html>
巴特西

窗口中各模块的切换效果，使用jquery实现

最新文章

热门文章
