<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
margin: 20px;
float: left;
background: red;
border: blue 1px solid;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2')
oDiv.onmouseover = function(){
startMove(this,"height",300);
};
oDiv.onmouseout = function(){
startMove(this,"height",100);
};
oDiv2.onmouseover = function(){
startMove(this,"width",400);
};
oDiv2.onmouseout = function(){
startMove(this,"width",200);
}
}
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj,false)[name]
}
}
//var alpha = 30;所有的东西都不能公用
function startMove (obj,attr,iTarget) {
clearInterval(obj.time);
obj.time = setInterval(function(){
var cur = parseInt(getStyle(obj,attr));
var speed = (iTarget-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.time);
} else {
obj.style[attr] = cur+speed+'px';
}
},30)
}
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
</html>
