为什么我的定时器清楚不了???

来源:2-1 JS速度动画

dingdingqiao

2016-05-29 10:24


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
       #div1{width: 200px;height: 200px;background:red;position: relative;left: -200px;}
       #div1 span{width: 20px;height: 50px;background: blue;position: absolute;left: 200px;top: 75px;}
   </style>
   <script type="text/javascript">
       window.onload=function(){
           var odiv=document.getElementById('div1');
           odiv.onmouseover=function(){
               startmove();
           }
       };

       var timer=null;
       function startmove(){
           var odiv=document.getElementById('div1');
           timer=setInterval(function(){
               if(odiv.offsetLeft==0){
                   clearInterval(timer)
               }else{odiv.style.left=odiv.offsetLeft+10+'px'}
           },30);

       }

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

</body>
</html>

写回答 关注

2回答

  • weibo_慕丝7400593
    2016-06-03 15:15:41

    在startMove函数执行时,启动清除所有的定时器.

    function startMove(){

    clearInterval(timer);

    ...

    }

  • Acting_
    2016-05-29 15:04:26

    在定时器启动前也清除一遍,试试

JS动画效果

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

113923 学习 · 1443 问题

查看课程

相似问题