JS移入移出效果详解

时间：5年前阅读：6328

　　如果把鼠标移入和鼠标移出都增加运动效果，则需要使用运动函数但是，有一个很重要的问题需要注意的是，鼠标移入移出的顺序问题，如果把移入移出事件都加在父元素的身上，则需要做如下处理

　　由于鼠标从子元素移动到父元素上时，会触发子元素的移出事件，通过冒泡也会触发父元素移出事件。此时，有两种方法解决该问题。一种是在子元素移出事件中阻止冒泡，另一种是在父元素移出事件设置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,我们将及时处理。

微信扫码关注

更新实时通知

JS移入移出效果详解

网友评论