鼠标放上去没反应-慕课网

鼠标放上去没反应

来源：3-1 JS缓冲动画

不知所语

2016-06-20 23:41

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

写回答关注

2回答

萧雁翎

2016-06-22 08:51:37

不好意思我看错了，应该是你用了style.left却没有用绝对定位，你在#div1样式里加一句position:absolute应该就行了。

0 1
萧雁翎

2016-06-21 11:53:08

offsetLeft属性是只读的，直接赋值没用

2 1

萧雁翎回复不知所语

position:absolute应该就行了。

2016-06-22 08:50:16

共 2 条回复 >

JS动画效果

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

113923 学习 · 1443 问题

查看课程

相似问题

鼠标放上去没反应

回答 2

鼠标移出后没有反应

回答 1

为什么我的鼠标放上去都没用反应啊？代码如下，哪里错了，求大神指点

回答 1

为什么鼠标移开时没反应呢

回答 1

为什么鼠标放上去，上去了，不会下来，但是鼠标再动一下，就从下面慢慢上来了

回答 3

打开慕课网App查看更多内容