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