问答详情
源自：4-1 JS多物体动画

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

<!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]=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 10:24

个回答

  • weibo_堂客啊_04055191
    2017-09-22 15:57:40
    已采纳 

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


    0