javascript - 侧边影藏div，以10px/1ms滑出div，以1px/1ms滑入的途中再次onmouseover，为什么div不受控制乱弹
本文介绍了javascript - 侧边影藏div，以10px/1ms滑出div，以1px/1ms滑入的途中再次onmouseover，为什么div不受控制乱弹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匀速动画</title>
<style type="text/css">
#move{
width: 200px;
height: 200px;
background-color: #996666;
position: absolute;
top: 20px;
left: -190px;
cursor:pointer;
}
</style>
<script type="text/javascript">window.onload=function(){
var getDiv = document.getElementById('move');
getDiv.onmouseover = function(){
startMove();
}
getDiv.onmouseout = function(){
moveBack();
}
var timer = null;
function startMove(){
clearInterval(timer);
timer = setInterval(function(){
if(getDiv.offsetLeft==0){
clearInterval(timer);
}
else{
getDiv.style.left= getDiv.offsetLeft+10+"px";
}
},1);
}
function moveBack(){
clearInterval(timer);
timer = setInterval(function(){
if(getDiv.offsetLeft==-190){
clearInterval(timer);
}
else{
getDiv.style.left= getDiv.offsetLeft-1+"px";
}
},1);
}
}
</script></head>
<body>
<div id="move">
</div>
</body>
</html>
解决方案
这么简单的效果，直接用css写不是更好么
至于乱动，具体操作是先完全弹出来，然后div缓慢缩回去时再次把鼠标放在div上触发mouseover，是因为onmouseout中定时器的间隔比onmouseover定时器的移动距离小，要改的话，可以设置一个状态，等完全缩进去的时候onmouseover再允许定义定时器
function startMove() {
clearInterval(timer);
if(getDiv.offsetLeft != -190){
return;
}
timer = setInterval(function() {
if (getDiv.offsetLeft == 0) {
clearInterval(timer);
} else {
getDiv.style.left = getDiv.offsetLeft + 10 + "px";
}
}, 1);
}这篇关于javascript - 侧边影藏div，以10px/1ms滑出div，以1px/1ms滑入的途中再次onmouseover，为什么div不受控制乱弹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
