JS移入移出效果详解
如果把鼠标移入和鼠标移出都增加运动效果，则需要使用运动函数但是，有一个很重要的问题需要注意的是，鼠标移入移出的顺序问题，如果把移入移出事件都加在父元素的身上，则需要做如下处理
由于鼠标从子元素移动到父元素上时，会触发子元素的移出事件，通过冒泡也会触发父元素移出事件。此时，有两种方法解决该问题。一种是在子元素移出事件中阻止冒泡，另一种是在父元素移出事件设置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,我们将及时处理。
微信扫码关注
更新实时通知