我的代码哪里有错呢?我怎么排除都实现不了。

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

雪神仙

2016-08-06 16:01

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>more</title>
<style type="text/css">
ul ,li{

    list-style: none;
}
ul li{
width:200px;
height: 100px;
background: yellow;
margin-bottom: 20px;

}


</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(){
        startMove(this,500);

       }

       Ali[i].onmouseout=function(){
           startMove(this,10);
       }
    }


    }

var timer=null;
function startMove(obj,iTarget){
clearInterval(timer);
timer=setInterval(function(){
    var speed=(iTarget-obj.offsetwidth)/10;
    if(speed=speed>0){ Math.ceil(speed)}
      else{
     Math.floor(speed);}
    if(obj.offsetwidth=iTarget){
     clearInterval(timer);

    }
    else{
        obj.style.width=obj.offsetwidth+speed+'px';
    }
 

},30)


}

</script>

</head>




<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>



    </ul>
</body>
</html>

写回答 关注

2回答

  • tOofu
    2016-08-06 17:04:02
    已采纳
    1. offsetwidth写错了,应该是offsetWidth;

    2.  if(speed=speed>0){   //这里不太懂为什么要赋值,我改成了(speed>0)

           Math.ceil(speed)   //这里要赋值,不然计算了也没有用到。改成speed=Math.ceil(speed);

      }
      else{
           Math.floor(speed);   //改成speed=Math.floor(speed);

      }

    3.  if(obj.offsetwidth=iTarget){    //这里应该是obj.offsetwidth==iTarget,而不是赋值噢
            clearInterval(timer);
      } else{
              obj.style.width=obj.offsetwidth+speed+'px';  }
        

    4. 改了这些地方之后应该就能动了,虽然还有一些BUG,共用了定时器神马的,我也还没消化好。。就只能帮到这里了恩:)

    雪神仙

    非常感谢

    2016-08-09 08:14:59

    共 1 条回复 >

  • qq_二冬_0
    2016-08-06 17:26:56
    <script type="text/javascript">
      window.onload=function(){
        var oLi = document.getElementsByTagName("li");
        
        for(var i=0;i<oLi.length;i++){
          oLi[i].timer=null;          //给每一个li的onmouseover事件设置一个定时器
          oLi[i].onmouseover=function(){
            startMove(this,500);
          };
    
          oLi[i].onmouseout=function(){
            startMove(this,10);
           };
        }
      }
    
    function startMove(obj,iTarget){
      clearInterval(obj.timer);
      obj.timer=setInterval(function(){
        var speed=(iTarget-obj.offsetWidth)/10; //offsetWidth拼错了,要用驼峰法。
        speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);//你原来这里的if else语句写错了,我给你改成了三元表达式。实现的作用和楼上那位同学是一样的,你原来的代码你可以自己去alert(speed),是一个布尔值。
        if(obj.offsetWidth==iTarget){ //if 语句的判断错了。
          clearInterval(obj.timer);
        }
        else{
            obj.style.width=obj.offsetWidth+speed+'px';
        }
      
      },30)
    }
    </script>
    
    
    具体的错误其实我楼上那位同学都给你指出来了,你可以对照我的代码印证一下

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113923 学习 · 1443 问题

查看课程

相似问题