JS緩沖動(dòng)畫中為什么會(huì)卡住閃動(dòng)？
<!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>無(wú)標(biāo)題文檔</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>
2016-11-03
你的這句話寫錯(cuò)了：
你先前已經(jīng)定義過(guò)了，但是你這里又重新定義了一遍，但是javascript的運(yùn)行是從上到下的，他認(rèn)為你重新定義了一個(gè)新的timerId，簡(jiǎn)單說(shuō)你去掉這個(gè)var就正常了，改成這樣：
2016-10-28
說(shuō)實(shí)話? 我都聽(tīng)不懂你的問(wèn)題? 卡住閃動(dòng)？