DIV的变高与变宽

代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: yellow;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById("div1");
            oDiv1.onmouseover = function () {
                startMove(this, 400);
            }

            oDiv1.onmouseout = function () {
                startMove(this, 200);
            };

            function startMove(obj, iTarger) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var speed = (iTarger - obj.offsetHeight) / 6;//此处切记结果不要写反
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (obj.offsetHeight == iTarger) {
                        clearInterval(obj.timer);//此处需注意！
                    } else {
                        obj.style.height = obj.offsetHeight + speed + "px";
                    }
                }, 30);
            }


            var oDiv2 = document.getElementById("div2");
            oDiv2.onmouseover = function () {
                startMove_1(this, 400);
            }

            oDiv2.onmouseout = function () {
                startMove_1(this, 200);
            };

            function startMove_1(obj, iTarger) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var speed = (iTarger - obj.offsetWidth) / 4;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (obj.offsetWidth == iTarger) {
                        clearInterval(obj.timer);
                    } else {
                        obj.style.width = obj.offsetWidth + speed + "px";
                    }
                }, 30);
            }

        }
    </script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
</html>

运行结果：

　　初始界面：

鼠标滑动之后界面：

　　鼠标滑动左边：　　　　　　　　　　　　　　　　　　　　鼠标滑动右边：

posted on 2016-03-11 15:18 Newbie_小白阅读(490) 评论(0) 编辑收藏举报