JS缓冲动画中为什么会卡住闪动？
慕粉studying
2016-10-28 18:56
<!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>
2回答
-
- 折翼天使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
说实话 我都听不懂你的问题 卡住闪动？
JS动画效果
113925 学习 · 1443 问题
相似问题