如果把鼠标移入和鼠标移出都增加运动效果，则需要使用运动函数但是，有一个很重要的问题需要注意的是，鼠标移入移出的顺序问题，如果把移入移出事件都加在父元素的身上，则需要做如下处理
由于鼠标从子元素移动到父元素上时，会触发子元素的移出事件，通过冒泡也会触发父元素移出事件。此时，有两种方法解决该问题。一种是在子元素移出事件中阻止冒泡，另一种是在父元素移出事件设置target判断条件。当target为父元素本身时才执行
鼠标从父元素移动到子元素的过程中，会按照顺序触发父元素的移出事件、子元素的移入事件以及父元素的移入事件
为了避免触发移入事件。此时，使用开关变量对移入事件的代码进行限制。移出事件代码完成之前不执行移入事件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
#test{
width: 100px;
height: 100px;
background-color: lightblue;
text-align:center;
position:absolute;
top: 0;
left: -100px;
}
#test-in{
width: 30px;
height: 60px;
background-color: orange;
margin-left: 100px;
position:relative;
top: 20px;
}
</style>
<div id="test">
<div id="test-in">分享到</div>
</div>
<script>
var testIn = document.getElementById('test-in');
var timer1,timer2;
var onOff = false;
test.onmouseover = function(){
if(!onOff){
clearInterval(timer1);
timer1 = setInterval(function(){
if(!onOff){
if(test.offsetLeft < 0){
test.style.left = test.offsetLeft + 10 + 'px';
}else{
test.style.left = '0';
clearInterval(timer1);
timer1 = 0;
}
}else{
clearInterval(timer1);
}
},30);
}
}
test.onmouseout = function(e){
e = e || event;
var target = e.target || e.srcElement;
if(target === test){
//当触发父元素移出事件时，开启开关
onOff = true;
clearInterval(timer2);
timer2 = setInterval(function(){
if(test.offsetLeft > -100){
test.style.left = test.offsetLeft - 10 + 'px';
}else{
test.style.left = '-100px';
clearInterval(timer2);
timer2 = 0;
//当运动结束后，关闭开关
onOff = false;
}
},30);
}
}
</script>
</body>
</html>
原文链接：https://www.qiquanji.com/post/8718.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知