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>

运行结果：

　　初始界面：

　　　　 DIV的变高与变宽

鼠标滑动之后界面：

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

DIV的变高与变宽