js鼠标移入移出后元素会出现一直闪动，怎么回事？
一段简单的移入移出效果，可之后会出现元素一直跳动的情况，是哪里没写好？？完整代码如下：<!doctypehtml><metacharset="utf-8"/><title...
一段简单的移入移出效果，可之后会出现元素一直跳动的情况，是哪里没写好？？
完整代码如下：
<!doctype html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box { width: 150px; height: 300px; position: absolute; left: -150px; top: 200px; background: #f3f3f3; }
span { width: 20px; height: 60px; background: green; position: absolute; right: -20px; top: 30px; color: #fff; }
</style>
<body>
<div class="box" id="box">
<span>分享到</span>
</div>
</body>
<script type="text/javascript">
window.onload = function()
{
var oBox = document.getElementById("box");
oBox.onmouseover = function()
{
starMove();
};
oBox.onmouseout = function()
{
starMove2();
};
}
//移入
function starMove()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft >= 0)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft + speed + 'px';
}
}, 30)
}
//移出
function starMove2()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft == -150)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft - speed + 'px';
}
}, 30)
}
</script> 展开
完整代码如下：
<!doctype html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box { width: 150px; height: 300px; position: absolute; left: -150px; top: 200px; background: #f3f3f3; }
span { width: 20px; height: 60px; background: green; position: absolute; right: -20px; top: 30px; color: #fff; }
</style>
<body>
<div class="box" id="box">
<span>分享到</span>
</div>
</body>
<script type="text/javascript">
window.onload = function()
{
var oBox = document.getElementById("box");
oBox.onmouseover = function()
{
starMove();
};
oBox.onmouseout = function()
{
starMove2();
};
}
//移入
function starMove()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft >= 0)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft + speed + 'px';
}
}, 30)
}
//移出
function starMove2()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft == -150)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft - speed + 'px';
}
}, 30)
}
</script> 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励30（财富值+成长值）
1个回答
展开全部
//移入
function starMove()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft >= 0)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft + speed + 'px';
}
}, 30)
}
//移出
function starMove2()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft == -150)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft - speed + 'px';
}
}, 30)
}
这俩个方法里的time的定义位置问题，，，，你把time变成全局变量就没问题了
每次执行的时候都是新的time变量，，，所以停止不了前面的定时器。
function starMove()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft >= 0)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft + speed + 'px';
}
}, 30)
}
//移出
function starMove2()
{
var doc = document;
var oBox = doc.getElementById("box");
var timer = null;
clearInterval(timer);
timer = setInterval(function()
{
var speed = 10;
if(oBox.offsetLeft == -150)
{
clearInterval(timer);
}
else
{
oBox.style.left = oBox.offsetLeft - speed + 'px';
}
}, 30)
}
这俩个方法里的time的定义位置问题，，，，你把time变成全局变量就没问题了
每次执行的时候都是新的time变量，，，所以停止不了前面的定时器。
追问
这是为什么？没理解懂
追答
关闭定时器的时候使用的参数是想要关闭的定时器的参数，但是在你上面使用了新的变量来存储想要关闭的，所以在函数内使用clearInterval(timer)的时候跟clearInterval(null)是一样的。
所以你得把timer定义成两个函数都能访问的权限即全局才行。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
