測試時移入鼠標box1的style left在0和-10之間跳動,移出時在-190和-200這兩個值跳動
<!doctype html>
<html>
<head>
<title>測試offset</title>
<meta charset="utf-8">
<style>
*{margin:0px; padding:0px;}
#box1{width:200px; height:200px; background-color:green; position:relative;left:-200px; top:0px;}
#box1 span{background-color:blue;position:absolute; left:200px; top:75px;}
</style>
</head>
<body>
<div id="box1"><span>分享</span></div>
<script>
window.onload=function(){
var mydiv=document.getElementById("box1");
mydiv.onmouseover=function(){
startMove(10,0);}
mydiv.onmouseout=function(){
startMove(-10,-200);}
}
function startMove(speed,mytarget){
clearInterval(i);
var mydiv=document.getElementById("box1");
var i=null;
i=setInterval(function(){
if(mydiv.offsetLeft==mytarget)
{
clearInterval(i);}
else{
mydiv.style.left=mydiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</body>
</html>
2016-04-18
把i在調(diào)用之前定義,即把var i=null; 放在函數(shù)之前,作為全局變量。
? ? ? ?startMove(-10,-200);}
}
var i=null;
function startMove(speed,mytarget){
2016-04-18
我也是新手??戳艘幌履愕拇a,發(fā)現(xiàn)你的定時器t沒有定義在全局,var ?i=null的位置錯誤。我的個人理解是這樣:你這樣子相當于沒有清除i,相當于又重新建立一個定時器,但是把之前的定時器賦空。所以定時器間會相互影響。