窗口中各模块的切换效果，使用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>

相关阅读:
在仅有的一次生命里活出自己最大的可能
 每个人都渴望赞美
 历练领导力的八字要诀
 爱情语录
 Ps
别跟我要钱，我是教授
 改变人生的五个问题
 纪晓岚妙用口才
 智慧和智商
 经典
原文地址：https://www.cnblogs.com/lunawzh/p/4863624.html