鼠标划过不运动,小伙伴们帮我看下哪里错了

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

微微落

2016-07-13 14:37

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
<style>
*{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].timer = null;
aLi[i].onmouseover  = function(){
           startMove(this,400);
}
     aLi[i].onmouseout = function(){
           startMove(this,200);
}
   }
}
//var timer= null;
function startMove( obj , iTarget)/*obj多个参数的定义*/
{
    clearInterval(obj.timer);
obj.timer = setInterval(function(){
             var speed = (iTarget - obj.offsetWidth)/8;
speed = speed > 0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == iTarget){
                clearInterval(obj.timer);
}
            else{
                obj.style.Width =  obj.offsetWidth + speed +'px';
}
        },30)
    }
</script>
</head>
<body>
<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>
</body>
</html>

写回答 关注

1回答

  • 用户1139579
    2016-07-13 18:26:53
    已采纳

    http://img.mukewang.com/578617460001ac9401180039.jpg这里的width应为小写

    微微落

    非常感谢!就是这个问题

    2016-07-14 08:40:03

    共 1 条回复 >

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题