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

我的获取到的对象一直是window 代码如下移入就会报错

<!doctype html>

<html>

<head>

ul li {

list-style: none;

width: 200px;

height: 100px;

background: yellow;

margin-bottom: 20px;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

window.onload=function() {

var lis=document.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

lis[i]=onmouseover=function(){

Move(this,400);

}

lis[i]=onmouseover=function(){

Move(this,200);

}

var timer=null;

function Move(tar,aim) {

clearInterval(timer);

timer=setInterval(function(){

var sp=(aim-tar.offsetWidth)/8;

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

if(tar.offsetWidth==aim){

clearInterval(timer);

}else{

tar.offsetWidth=tar.style.width+sp+"px";

}

},10);

}

</script>

</html>

又报错了T_T

2017-09-21

源自：JS动画效果 4-1

关注问题我要回答

1415

操作

收起

1 回答

weibo_堂客啊_04055191 回答被采纳 +2 积分
2017-09-22

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS动画2</title>
    <style type="text/css">
 ul li {
    list-style: none;
    width: 200px;
   height: 100px;
   background: yellow;
   margin-bottom: 20px;
}

    </style>
</head>
<body>
  <ul>
<li>1</li>
<li>2</li>
<li>3</li>
  </ul>
</body>
   <script type="text/javascript">
   window.onload=function() {
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
		lis[i].timer=null;//给每一个li设一个私有的定时器
      lis[i].onmouseover=function(){//不是等于符号是点.
        Move(this,400);
      }
      lis[i].onmouseout=function(){//不是等于符号是点.
        Move(this,200);
      }
    }
  }
//var timer=null;不能共用同一个定时去
  function Move(tar,aim) {
   clearInterval(tar.timer);
   tar.timer=setInterval(function(){
  var sp=(aim-tar.offsetWidth)/8;
  sp=sp>0?Math.ceil(sp):Math.floor(sp);
    if(tar.offsetWidth==aim){
      clearInterval(tar.timer);
    }else{
      
      tar.style.width=tar.offsetWidth+sp+"px";//这里你写反了
    }
  

   },10);
  }
   
 
   </script>
</html>