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

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

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

雪神仙

2016-08-06

源自：JS动画效果 4-1

关注问题我要回答

668

操作

收起

2 回答

tOofu 回答被采纳 +3 积分
2016-08-06

offsetwidth写错了，应该是offsetWidth；
if(speed=speed>0){ //这里不太懂为什么要赋值，我改成了（speed>0）
Math.ceil(speed) //这里要赋值，不然计算了也没有用到。改成speed=Math.ceil(speed);
}
else{
Math.floor(speed); //改成speed=Math.floor(speed);
}
if(obj.offsetwidth=iTarget){ //这里应该是obj.offsetwidth==iTarget，而不是赋值噢
clearInterval(timer);
} else{
obj.style.width=obj.offsetwidth+speed+'px'; }
改了这些地方之后应该就能动了，虽然还有一些BUG，共用了定时器神马的，我也还没消化好。。就只能帮到这里了恩:)

0 回复有任何疑惑可以回复我~

收起回答

雪神仙提问者

非常感谢

2016-08-09 回复有任何疑惑可以回复我~

qq_二冬_0
2016-08-06

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


具体的错误其实我楼上那位同学都给你指出来了，你可以对照我的代码印证一下

0 回复有任何疑惑可以回复我~

收起回答