明明和老师的代码是一样的,为什么我的在多次点击的时候还是跑的很快,感觉前面那个清除没有作用

来源:2-1 JS速度动画

芥子1204

2016-04-06 21:51

<!DOCTYPE  HTML>

<html >

<head>

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

<title>js运动</title>

<style>

*{margin:0px;padding:0px;}

#div1{height:200px;

         width:200px;

background:red;

position:relative;

left:-200px;}

#share{width:50px;

       height50px;

  background:blue;

  position:absolute;

  top:100px;

  left:200px;

  }

</style>

<script>

  window.onload=function(){

  var odiv=document.getElementById("div1");

    odiv.onmouseover=function(){

startMove();

}

  }

  var timer=null;

  function startMove(){

 clearInterval(timer);

 var odiv=document.getElementById("div1");

 setInterval(function(){

 if(odiv.offsetLeft==0){

 clearInterval(timer);

 }

 else{

 odiv.style.left=odiv.offsetLeft+1+"px";

 }

 },30)

 }

</script>

</head>

<body>

  <div id="div1">

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

 </div>

</body>

</html>


写回答 关注

3回答

  • MoocChenWei
    2016-04-06 22:46:05
    已采纳

    timer在这里需要为全局变量,在定时器前面加timer=,注意不能再加var,否则据就近原则,startMove函数中使用的timer就不是函数外部的全局变量了,就无法达到预期的效果~你试试看

    ahao43...

    我也是这个问题,去掉var好了,感谢

    2016-05-09 01:58:50

    共 2 条回复 >

  • 谷神通
    2016-04-06 22:48:23

    你可以试试将setInterval(function(){

     if(odiv.offsetLeft==0){

    改为

    timer=setInterval(function(){

     if(odiv.offsetLeft==0){

    芥子1204

    谢谢~~~阿里阿朵

    2016-04-07 20:16:19

    共 1 条回复 >

  • 话多不如听歌
    2016-04-06 22:11:36

    "clearInterval(timer); " 这句代码下面还有个 " setInterval(function(){...} " 前面没有加 " var timer = "

    芥子1204

    谢谢~~~

    2016-04-07 20:15:47

    共 1 条回复 >

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题