鼠标放上去没反应

源自：3-1 JS缓冲动画

鼠标放上去没反应

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   *{
       margin: 0;
       padding: 0;
   }

   #div1{
       width: 200px;
       height: 300px;
       background-color: yellow;
   }

   </style>
   <script type="text/javascript">
       window.onload = function(){
           var div1 = document.getElementById("div1");
           div1.onmouseover = function(){
               startMove(0);
           }

           div1.onmouseout = function(){
               startMove(-200);
           }
       }

       var timer = null;
       function startMove(itarget){
           clearInterval(time);
           var div1 = document.getElementById('div1');
           timer = setInterval(function(){
               var speed = (itarget-div1.offsetLeft)/20;
               speed = speed > 0? Math.ceil(speed) : Math.floor(speed);
               if(div1.offsetLeft == itarget){
                   clearInterval(timer);
               }else{
                   div1.style.left = div1.offsetLeft + speed + 'px';
               }

           }, 30)
       }

   </script>
</head>
<body>
   <div id="div1"></div>

</body>
</html>

提问者：不知所语 2016-06-20 23:41

个回答

火星上的鱼

2016-06-21 11:56:15

已采纳

首先，是clearInterval(timer)不是(time)。
其次，你的Div默认left值就是0，startMove引入的目标变量也是0，鼠标移入时自然不会出现动画，修改一下变量值。
当然，最重要的是你的div没有设置定位属性。

0