
<!DOCTYPE html> |
<html> |
<head> |
<meta charset="UTF-8"> |
<title>多定时器多物体运动框架</title> |
<style type="text/css"> |
#div1{ |
width: 200px; |
height: 200px; |
background: yellow; |
margin: 10px; |
float: left; |
} |
#div2{ |
width: 200px; |
height: 200px; |
background: yellow; |
margin: 10px; |
float: left; |
} |
</style> |
</head> |
<body> |
<div id="div1">变宽</div> |
<div id="div2">变高</div> |
<script type="text/javascript"> |
window.onload=function(){ |
var oDiv1=document.getElementById('div1'); |
oDiv1.onmouseover=function(){ |
startMove1(this,400); |
} |
oDiv1.onmouseout=function(){ |
startMove1(this,200); |
} |
var oDiv2=document.getElementById('div2'); |
oDiv2.onmouseover=function(){ |
startMove2(this,400); |
} |
oDiv2.onmouseout=function(){ |
startMove2(this,200); |
} |
} |
|
|
function startMove1(obj,iTarget){ |
clearInterval(obj.timer); |
obj.timer=setInterval(function(){ |
speed=(iTarget-obj.offsetWidth)/6; |
speed=speed>0?Math.ceil(speed):Math.floor(speed); |
if(obj.offsetWidth==iTarget){ |
clearInterval(obj.timer); |
}else{ |
obj.style.width=obj.offsetWidth+speed+'px'; |
} |
},30); |
} |
|
function startMove2(obj,iTarget){ |
clearInterval(obj.timer); |
obj.timer=setInterval(function(){ |
speed=(iTarget-obj.offsetHeight)/6; |
speed=speed>0?Math.ceil(speed):Math.floor(speed); |
if(obj.offsetHeight==iTarget){ |
clearInterval(obj.timer); |
}else{ |
obj.style.height=obj.offsetHeight+speed+'px'; |
} |
},30); |
} |
</script> |
</body> |
</html> |



