为什么清除定时器没有用,运动后停不下来

来源:2-1 JS速度动画

sulin

2016-05-23 21:45

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta  http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>速度动画</title>

<style type="text/css">

  div{margin:0; padding: 0;}

  #div1{width: 200px;height: 200px;background: red;position: relative;left: -200px;top:0px;}

  #share{width: 20px;height: 50px; position: absolute;left: 200px;top: 75px;background: blue;}

</style>


</head>

<body>

  <div id="div1">

  <span id="share">分享</span>

  </div>

</body>

<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');

 var timer=setInterval(function(){

if(oDiv.offsetLeft==0){

clearInterval(timer);

}

else{

oDiv.style.left=oDiv.offsetLeft+10+"px";

   }

},30)

}

</script>

</html>


写回答 关注

2回答

  • dingdingqiao
    2016-05-29 10:21:06

    我的定时器也清楚不了,一直没有找到答案

    sulin

    我的找到问题所在了,首先要*{margin:0; padding: 0;}来初始化清除所有样式,否则后来的判断条件里,if(oDiv.offsetLeft==0),这个oDiv.offsetLeft==0的临界条件永远都满足不了,因为默认的样式都有个值。

    2016-05-29 11:03:41

    共 1 条回复 >

  • 我叫土小豆
    2016-05-23 22:46:47

    你清除的是计时器叠加,并不是清除的计时器

    sulin

    不是啊,我是在判断条件if(oDiv.offsetLeft==0){ clearInterval(timer); }里清除的定时器啊

    2016-05-24 08:49:13

    共 1 条回复 >

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题