多物体运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
50px;
height: 30px;
background: #444444;
margin-top: 5px;
}
</style>
<script>
window.onload = function(){
var obj = document.getElementsByTagName('div');
for(var i=0;i<obj.length;i++){
obj[i].onmouseover = function{
startmove(this,500);
};
obj[i].onmouseout = function(){
startmove(this,50);
};
}
};
var timer = null;
function startmove(obj,target){
var speed = (target-obj.offsetWidth)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
clearInterval(timer);
timer = setInterval(function(){
if(obj.offsetWidth == target){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth + speed +'px';
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>