<!doctype> <html> <head> <meta charset = "utf-8"> <title>多物体运动</title> <style type="text/css"> *{margin: 0;padding: 0;} ul,li{list-style: none;} ul li{width: 200px;height: 50px;background: #333;margin-bottom: 20px;} </style> <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName("li"); var timer = null; var speed = 0; var obj = 3; for(var i = 0;i<aLi.length;i++){ aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } } function startMove(abj,iTarget){//obj表示多个当前的 clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget - abj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed);//如果大于零向上取整,如果小于零就向下取整; if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = abj.offsetWidth + speed + "px"; } },30) } } </script> </head> <body> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
相关分类