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

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

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

深呼吸_0

2015-09-06

源自：JS动画效果 4-1

关注问题我要回答

868

操作

收起

6 回答

Y_du
2015-09-07

<!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上面了