为什么我的程序没有效果,求指导!

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

Viola_z

2015-09-25 14:57

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<style type="text/css">

*{

 margin:0;

 padding:0;

}


ul,li{

list-style:none;

}

ul li{

   width:200px;

   height:100px;

   background:yellow;

   margin-bottom:20px;

}

</style>

<script>

window.onload=function(){

     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,iTarget){

    clearInterval(timer); 

timer=setInterval(function(){

  var speed=(iTarget-obj.offsetWidth)/8;

  speed=speed>0?Math.ceil(speed):Math.floor(speed);

  if(obj.offsetWidth==iTarget){

     clearInterval(timer);

  }else{

     obj.style.width=obj.oddsetWidth+speed+'px';

  }

},30)

}

</script>

</head>

<body>

<ul>

   <li></li>

   <li></li>

   <li></li>

</ul>

</body>

</html>


写回答 关注

1回答

  • pardon110
    2015-09-28 17:23:36

    你自己太粗心了,代码写错了。  obj.style.width=obj.oddsetWidth+speed+'px';应为offset

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题