问答详情
源自:3-1 JS缓冲动画

JS缓冲动画中为什么会卡住闪动?

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


*{margin:0; padding:0}

.bigBox

{

width:200px; 

height:200px; 

left: -200px;

top:120px; 

background:red;

position:relative;

opacity:30;

}

span

{

width: 20px;

height: 50px;

background: blue;

position: absolute;

left: 200px;

top: 75px;

}


</style>

<script type="text/javascript" >


window.onload=function()

{

var movebigBox=document.getElementById("big");

var timerId = null;

movebigBox.onmouseover=function(){moveFun(0)};

movebigBox.onmouseout=function(){moveFun(-200)};

function moveFun(target)

{

clearInterval(timerId);

   var timerId=setInterval(function move()

{  

  var speed=(target-movebigBox.offsetLeft)/20;

  speed=speed>0?Math.ceil(speed):Math.floor(speed);

  if(movebigBox.offsetLeft==target)

{

clearInterval(timerId);

}

else

//document.title=speed;

movebigBox.style.left  = movebigBox.offsetLeft+speed+"px";

}

},30);

}

}


</script>

</head>

<body>

  <div class="bigBox" id="big" >

  <span>分享</span>

  </div>

</body>

</html>


提问者:慕粉studying 2016-10-28 18:56

个回答

  • 折翼天使I
    2016-11-03 19:14:40
    已采纳

    你的这句话写错了:

     var timerId=setInterval(function move()

    你先前已经定义过了,但是你这里又重新定义了一遍,但是javascript的运行是从上到下的,他认为你重新定义了一个新的timerId,简单说你去掉这个var就正常了,改成这样:

    timerId=setInterval(function move()


  • _SunDawn
    2016-10-28 23:26:46

    说实话  我都听不懂你的问题  卡住闪动?