首页 > 代码库 > (42)JS运动之多物体框架--多个div变宽
(42)JS运动之多物体框架--多个div变宽
如果只为div添加一个定时器的话,在多个div变宽的时候会发生问题,但是如果为每个div添加一个定时器,那么就可以实现多个物体变宽。注意:在多物体运动的情况下,所有东西不能共用。offsetXXX会跟border冲突导致不能得到想要的结果,在这里可以用getStyle()函数代替。
function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width:100px; height:50px; background:red; margin:10px; } </style> <script> window.onload=function (){ var aDiv=document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++) { aDiv[i].timer=null;//自定义属性,加一个定时器 aDiv[i].onmouseover=function () { startMove(this,400); }; aDiv[i].onmouseout=function () { startMove(this,100); }; } }; var timer=null; function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var 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); } </script> </head> <body > <div ></div> <div ></div> <div ></div> </body> </html>效果图:
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。