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

求问：有时候当鼠标移入他不会停下来，会一直往前走，突然又跑回来了；有一两次正正常的。

<DOCTYPE! html>
<head>
<meta charset="utf-8">
<title>动起来</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
window.onload = function(){
  var oTotal = document.getElementById('total');
  oTotal.onmouseover = function(){
   startMove(0);
   }
  oTotal.onmouseout = function(){
   startMove(-150);

  }
}
var timer=null;
function startMove(iTarget){
  clearInterval(timer);
  var oTotal = document.getElementById('total');
  var speed = (iTarget-oTotal.offsetLeft)/15;
             speed=speed>0?Math.ceil(speed):Math.floor(speed);
        timer = setInterval(function(){
        if(oTotal.offsetLeft == iTarget){
        clearInterval(timer);
         }else{
          oTotal.style.left=oTotal.offsetLeft+speed+'px';
         }
        },30);
        }

</script>
</head>
<body>
<div id="total">
<div id="share">
</div>
<span>分享</span>

</body>
</html>

aladdinx

2016-03-19

源自：JS动画效果 3-1

关注问题我要回答

1163

操作

收起

2 回答

YangZiHong 回答被采纳 +3 积分
2016-03-21

div标签没写好，span应该在里面，css样式定义好，注意var speed = (iTarget-oTotal.offsetLeft)/15;需要整除，因为后面if(oTotal.offsetLeft == iTarget)必须满足条件才会清除定时器，动画才会停下

0 回复有任何疑惑可以回复我~

收起回答

aladdinx 提问者

嗯，我div写的有些复杂，掉了一个尾标签用，我改了之后没什么反应，用了ceil和floor函数，应该可以吧。你的这段代码在chrome上有时会出现直接缩进去的现象。不过还是很谢谢

2016-03-21 回复有任何疑惑可以回复我~

YangZiHong 回复 aladdinx 提问者

导致的原因你可以试一下，是因为你给速度赋值时没写在定时器里面，你鼠标移上去的时候迅速移开再移进去就会发生这种情况，在执行startMove函数的时候会清除上一个定时器 var speed = (iTarget-oTotal.offsetLeft)/15; speed=speed>0?Math.ceil(speed):Math.floor(speed);

2016-03-21 回复有任何疑惑可以回复我~

qq_要D大调_0 回复 YangZiHong

你好，我还是不懂，清除计时器，但是函数不是还是重新给speed赋值吗，不懂为什么

2016-12-24 回复有任何疑惑可以回复我~

YangZiHong
2016-03-21

<DOCTYPE! html>
<head>
<meta charset="utf-8">
<title>动起来</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
    *{margin: 0;padding: 0;}
    #total{
      width: 150px;
      height: 300px;
      position: absolute;
      left: -150px;
      top: 0;
      background: #9cf;
    }
    #share{
      width: 30px;
      text-align: center;
      height: 60px;
      line-height: 30px;
      position: absolute;
      left:150px;
      top: 130px;
      background-color: #fcc;
    }
</style>
<script type="text/javascript">
window.onload = function(){
var oTotal = document.getElementById('total');
oTotal.onmouseover = function(){
   startMove(0);
   }
oTotal.onmouseout = function(){
   startMove(-150);

}
}
var timer=null;
function startMove(iTarget){
clearInterval(timer);
var oTotal = document.getElementById('total');
var speed = (iTarget-oTotal.offsetLeft)/15;
             speed=speed>0?Math.ceil(speed):Math.floor(speed);
        timer = setInterval(function(){
        if(oTotal.offsetLeft == iTarget){
         clearInterval(timer);
         }else{
          oTotal.style.left=oTotal.offsetLeft+speed+'px';
         }
         },30);
        }

</script>
</head>
<body>
<div id="total">
<span id="share">分享</span>
</div>

</body>
</html>