当前位置：首页 > 软件开发 > Web开发 > JavaScript

通过CSS，Jquery实现DIV的各种动作(包括漂移，未测试IE6)

来源：岁月联盟编辑：exp 时间：2012-07-24

此文实现了如下效果：
jquery获得窗口高宽，文档高宽值。
通过CSS设置，实现DIV置顶，置底，置左，置右，居中。
利用jquery实现DIV四个方向随滚动条，窗体大小浮动。
一个漂浮反弹的DIV。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取窗口高度宽度，DIV置顶，置底，置左，置右，居中，随滚动条居中</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            showwidth_height();
            $(window).resize(showwidth_height);
            $(window).scroll(movesmallleft);
            $(window).resize(movesmallleft);

            $(window).scroll(movesmallright);
            $(window).resize(movesmallright);

            $(window).scroll(movesmalltop);
            $(window).resize(movesmalltop);

            $(window).scroll(movesmallbottom);
            $(window).resize(movesmallbottom);

            var ivl = setInterval("floatdiv()", 10); //ivl变量，用来可以使得setInterval停止。通过clearInterval方法。
            $("#floatdiv").hover(function () { clearInterval(ivl) }, function () { ivl = setInterval("floatdiv()", 10); });
        })

        function showwidth_height() {
            var s = ""
                + "浏览器当前窗口可视区域高度:" + $(window).height() + "<br/>"
                + "浏览器当前窗口文档的高度:" + $(document).height() + "<br/>"
                + "浏览器当前窗口文档body的高度:" + $(document.body).height() + "<br/>"
                + "浏览器当前窗口文档body的总高度包括border padding margin :" + $(document.body).outerHeight(true) + "<br/>"
                + "浏览器当前窗口可视区域宽度:" + $(window).width() + "<br/>"
                + "浏览器当前窗口文档对象宽度:" + $(document).width() + "<br/>"
                + "浏览器当前窗口文档body的宽度:" + $(document.body).width() + "<br/>"
                + "浏览器当前窗口文档body的总宽度包括border padding margin:" + ($(document.body).outerWidth(true)) + "<br/>"
            $("#center").html(s);
        }

        function movesmallleft() {
            var topvalue = $(window).height() / 2 + $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            var leftvalue = 0 + $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            //这里的stop方法相当必要
            //停止正在进行的动画
            //因为滚动条滚动的时候，会触发多次scroll事件，每次触发的时候，都做动画影响效率，因此要加上stop方法
            //使之立即停止后再做动画。
            $("#smallleft").stop().animate({ top: topvalue, left: leftvalue, marginTop: "-10px" }, "slow");
        }
        function movesmallright() {
            var topvalue = 150 + $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            var rightvalue = 0 - $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            $("#smallright").stop().animate({ top: topvalue, right: rightvalue }, "slow");
        }
        function movesmalltop() {
            var topvalue = 0 + $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            $("#smalltop").stop().animate({ top: topvalue, left: leftvalue }, "slow");
        }
        function movesmallbottom() {
            var bottomvalue = 0 - $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
            $("#smallbottom").stop().animate({ bottom: bottomvalue, left: leftvalue }, "slow");
        }

        var direct = "leftup";
        //根据当前方向和偏移量，判断接下来的方向。
        function floatdiv() {
            var top = $("#floatdiv").offset().top;
            var left = $("#floatdiv").offset().left;
            //加上偏移量，主要用来处理滚动条的滚动时候对top，left的影响
            if (top < 0 + $(window).scrollTop() && direct == "rightup") {
                direct = "rightdown";
            }
            else if (top < 0 + $(window).scrollTop() && direct == "leftup") {
                direct = "leftdown";
            }
            else if (left < 0 + $(window).scrollLeft() && direct == "leftup") {
                direct = "rightup";
            }
            else if (left < 0 + $(window).scrollLeft() && direct == "leftdown") {
                direct = "rightdown";
            }
            //加上div的高度
            else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "leftdown") {
                direct = "leftup";
            }
            else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "rightdown") {
                direct = "rightup";
            }
            //加上div的宽度
            else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightdown") {
                direct = "leftdown";
            }
            else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightup") {
                direct = "leftup";
            }

            if (direct == "leftdown") {
                toptop = top + 1;
                leftleft = left - 5;
            } else if (direct == "rightdown") {
                toptop = top + 1;
                leftleft = left + 5;

            } else if (direct == "rightup") {
                toptop = top - 1;
                leftleft = left + 5;

            } else if (direct == "leftup") {
                toptop = top - 1;
                leftleft = left - 5;
            }

            $("#floatdiv").html(Date());
            $("#floatdiv").offset({ "top": top, "left": left })
        }

    </script>
    <style type="text/css">
        #top
        {
            position: fixed;
            top: 20px;
            left: 0px;
            height: 50px;
            width: 100%;
            background: #666666;
            z-index: 6;
            text-align: center;
        }

        #left
        {
            position: fixed;
            top: 50%;
            left: 10px;
            height: 300px;
            width: 100px;
            background: #666666;
            z-index: 6;
            text-align: center;
            margin-top: -150px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
        }

        #smallleft
        {
            position: absolute;
            top: 50%;
            left: 10px;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
            margin-top: -10px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
        }

        #smallright
        {
            position: absolute;
            top: 150px;
            right: 0px;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
        }

        #smalltop
        {
            position: absolute;
            top: 0px;
            left: 50%;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
        }

        #smallbottom
        {
            position: absolute;
            bottom: 0px;
            left: 50%;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
        }

        #floatdiv
        {
            position: fixed;
            top: 200px;
            left: 300px;
            height: 80px;
            width: 80px;
            background: blue;
            z-index: 6;
            text-align: center;
        }

        #bottom
        {
            z-index: 6;
            position: fixed;
            bottom: 0px;
            background: #666666;
            height: 50px;
            width: 100%;
            text-align: center;
        }

        #right
        {
            position: fixed;
            top: 50%;
            right: 10px;
            height: 300px;
            width: 100px;
            background: #666666;
            z-index: 6;
            text-align: center;
            margin-top: -150px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
        }

        #center
        {
            position: fixed;
            top: 50%;
            left: 50%;
            height: 200px;
            width: 400px;
            background: #666666;
            z-index: 6;
            text-align: center;
            margin-top: -100px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
            margin-left: -200px; /*因为不是50%不是真正的居中，所以要左移宽度的一半*/
        }
    </style>
</head>
<body>
    <div id="top">
        TOP
    </div>
    <div id="left">
        LEFT
    </div>
    <div id="bottom">
        BOTTOM
    </div>
    <div id="right">
        RIGHT
    </div>
    <div id="center">
        CENTER
    </div>
    <div id="smallleft">
    </div>
    <div id="smallright">
    </div>
    <div id="smallbottom">
    </div>
    <div id="smalltop">
    </div>
    <div id="floatdiv">
    </div>
    <div style="height: 1024px; background-color: Silver">
        <pre>

    绝对定位使元素的位置与文档流无关，因此不占据空间。
    这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
    普通流中其它元素的布局就像绝对定位的元素不存在一样：

    绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

</pre>
        <table>
            <tr>
                <td>
                    absolute
                </td>
                <td>
                    <p>
                        生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p>
                    <p>
                        元素的位置通过 "left", "top", "right" 以及 "bottom"
                        属性进行规定。</p>
                </td>
            </tr>
            <tr>
                <td>
                    fixed
                </td>
                <td>
                    <p>
                        生成绝对定位的元素，相对于浏览器窗口进行定位。</p>
                    <p>
                        元素的位置通过 "left", "top", "right" 以及 "bottom"
                        属性进行规定。</p>
                </td>
            </tr>
            <tr>
                <td>
                    relative
                </td>
                <td>
                    <p>
                        生成相对定位的元素，相对于其正常位置进行定位。</p>
                    <p>
                        因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</p>
                </td>
            </tr>
            <tr>
                <td>
                    static
                </td>
                <td>
                    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
                </td>
            </tr>
            <tr>
                <td>
                    inherit
                </td>
                <td>
                    规定应该从父元素继承 position 属性的值。
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
作者：一只博客