测试时移入鼠标box1的style left在0和-10之间跳动，移出时在-190和-200这两个值跳动
qincai
2016-04-18 14:06
<!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>
2回答
-
- 慕斯卡9731973
- 2016-04-18 15:31:00
把i在调用之前定义，即把var i=null; 放在函数之前，作为全局变量。
startMove(-10,-200);}
}
var i=null;
function startMove(speed,mytarget){ -
- 南城的1984
- 2016-04-18 16:12:13
我也是新手。看了一下你的代码，发现你的定时器t没有定义在全局，var i=null的位置错误。我的个人理解是这样：你这样子相当于没有清除i，相当于又重新建立一个定时器，但是把之前的定时器赋空。所以定时器间会相互影响。
JS动画效果
113925 学习 · 1443 问题
相似问题