到底是哪里有问题啊????
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多物体运动</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<ul>
<li ></li>
<li ></li>
<li ></li>
</ul>
</body>
</html>
CSS
ul li{
list-style:none;
width: 200px;
height: 100px;
margin-top: 20px;
background: yellow;
cursor: pointer;
}
JS
window.onload=function(){
var ali=document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++){
ali[i].onmouseover=function(){
setWidth(this,400);
}
ali[i].onmouseover=function(){
setWidth(this,200);
}
}
}
var timer=null;
function setWidth(obj,target){
clearInterval(timer);
timer=setInterval(function(){
var speed=(target-obj.offsetWidth)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==target){
clearInterval(timer);
}
else{
obj.style.width=obj.offsetWidth+speed+"px";
}
},30);
}