                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

我的多物体运动没有反应啊。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>多物体运动</title>
   <style type="text/css">
   ul,li{
       list-style: none;
   }
   ul li{
       width: 200px;
       height: 100px;
       background-color: yellow;
       margin-bottom: 20px;
   }
   </style>
   <script type="text/javascript">
       var ali=document.getElementsByTagName('li');
       for(var i=0;i<ali.length;i++){
           ali[i].onmouseover=function () {
               startMove(this,400);
           }
           ali[i].onmouseout=function () {
               startMove(this,200);
           }
       }
       var timer=null;
       function startMove(obj,iTarge){
           clearInterval(timer);
           timer=setInterval(function(){
               var speed=(iTarge-obj.offsetWidth)/8;
               speed=speed>0?Math.ceil(speed):Math.floor(speed);
               if(obj.offsetWidth==iTarge){
                   clearInterval(timer);
               }
               else{
                   obj.style.width=obj.offsetWidth+speed+'px';
               }
           },30);

       }
   </script>
</head>
<body>
<div>
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
</div>
</body>
</html>