<!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> |