代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {
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>
运行结果：
初始界面：
鼠标滑动之后界面：
鼠标滑动左边： 鼠标滑动右边：
