请问为什么没有效果了？？不知都哪里出错了。-慕课网

请问为什么没有效果了？？不知都哪里出错了。

来源：4-1 JS多物体动画

深呼吸_0

2015-09-06 19:44

<!DOCTYPE HTML>
<html>
<head>
   <title>多物体动画</title>
   <meta charset="UTF-8">
   <style type="text/css">
       *{
           padding: 0px;
           margin: 0px;
       }
       ul{
           list-style: none;
       }
       ul li{
           width: 130px;
           height: 100px;
           background:#F33;
           margin-top:15px;
       }
   </style>
   <script type="text/javascript">
       window.onload=function(){
       //事件监听
       var aLi = document.getElementsByTagName('li');
       for(var i=0;i<aLi.length;i++){
           aLi[i].onmouseover = function (){
               move2(this,400);
           }
           aLi[i].onmouseout = function (){
               move2(this,130);
           }
          }
       }
       //动画函数
          //var timer=null;
          function move2(obj,Target){
           clearInterval(obj.timer);
           obj.timer = setInterval(function(){
           var speed = (Target-obj.offsetWidth)/8;
               speed = speed>0?Math.ceil(speed):Math.floor(speed);
               if(obj.offsetWidth==Target){
                   clearInterval(obj.timer);//运动到指定位置后清除计时器
               }else{
                   obj.style.width = obj.offsetWidth+speed+'px';
               },30);
          }
   </script>
</head>
<body>
   <ul>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
   </ul>
</body>
</html>

写回答关注

2回答

Y_du: 2015-09-07 10:38:11

<!DOCTYPE HTML>
<html>
<head>
    <title>多物体动画</title>
    <meta charset="UTF-8">
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        ul{
            list-style: none;
        }
        ul li{
            width: 130px;
            height: 100px;
            background:#F33;
            margin-top:15px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
        //事件监听
        var aLi = document.getElementsByTagName('li');
        for(var i=0; i < aLi.length; i++){            
            aLi[i].onmouseover = function (){
                move2(this, 400);
            }
            aLi[i].onmouseout = function (){
                move2(this, 130);
            }
          }        
        }
        //动画函数
          //var timer=null;
          function move2(obj,Target){
              clearInterval(obj.timer);
              obj.timer = setInterval(function(){
                  var speed = (Target-obj.offsetWidth)/8;
                  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                  if(obj.offsetWidth==Target){
                      clearInterval(obj.timer);//运动到指定位置后清除计时器
                  }else{
                      obj.style.width = obj.offsetWidth+speed+'px';
                  }
              }, 30)
          }              
    </script>
</head>
<body>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</body>
</html>

setInterval的函数没有写正确。时间设置在else上面了

0 0