JavaScript多物体运动一
html:
<body> <div></div> <div></div> <div></div> </body>
css:
div{ height:30px; width:50px; background:green; margin:10px; }
javascript:
//物体多了,就要考虑到我们的面向对象的方式来实现滴呀 window.onload=function (){ var objs=document.getElementsByTagName(‘div‘); var len=objs.length; for(var i=0;i<len;i++){ objs[i].Timer=null; //添加一个定时器的属性 objs[i].onmouseover=function(){ moreMove(this,400); } objs[i].onmouseout=function (){ moreMove(this,50); } } } function moreMove(obj,iTarget){ //一步步的接近面向对象编码方式了滴呀 clearInterval(obj.Timer); obj.Timer=setInterval(function (){ var speed=(iTarget-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetLeft==iTarget){ clearInterval(obj.Timer); }else{ obj.style.width=obj.offsetWidth+speed+‘px‘; } },30) }
效果:
原文:http://www.cnblogs.com/mc67/p/5195751.html