<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>判断鼠标移入移出方向</title> ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????.outer { ???????????width: 400px; ???????????height: 400px; ???????????border: 2px solid orange; ???????????margin: 100px auto; ???????????overflow: hidden; ???????} ???????.outer div { ???????????width: 100%; ???????????height: 100%; ???????????background-color: yellow; ???????????opacity: 0.5; ???????????display: none; ???????} ???</style></head><body><div id="box" class="outer"> ???<div id="mask" style="left: 0;top:0;"></div></div><script type="text/javascript"> ???var oDiv = document.getElementById(‘box‘); ???var oMask = document.getElementById(‘mask‘); ???oDiv.disL = oDiv.offsetLeft; ???oDiv.disT = oDiv.offsetTop; ???oDiv.disR = oDiv.disL + oDiv.offsetWidth; ???oDiv.disB = oDiv.disT + oDiv.offsetHeight; ???oDiv.addEventListener(‘mouseenter‘, moveIn, false); ???oDiv.addEventListener(‘mouseleave‘, moveOut, false); ???function moveIn(e) { ???????var resL = Math.abs(e.clientX - oDiv.disL),//距离左边 ???????????????resT = Math.abs(e.clientY - oDiv.disT),//距离上边 ???????????????resR = Math.abs(e.clientX - oDiv.disR),//距离右边 ???????????????resB = Math.abs(e.clientY - oDiv.disB);//距离下边 ???????var min = Math.min(resL, resB, resR, resT); ???????//console.log(resL, resB, resR, resT, min); ???????if (min === resL) { ???????????console.log(‘左边移入‘); ???????????maskIn(‘left‘); ???????} else if (min === resT) { ???????????console.log(‘上边移入‘); ???????????maskIn(‘top‘); ???????} else if (min === resR) { ???????????console.log(‘右边移入‘); ???????????maskIn(‘right‘); ???????} else { ???????????console.log(‘下边移入‘); ???????????maskIn(‘bottom‘); ???????} ???} ???function moveOut(e) { ???????var resL = Math.abs(e.clientX - oDiv.disL),//距离左边 ???????????????resT = Math.abs(e.clientY - oDiv.disT),//距离上边 ???????????????resR = Math.abs(e.clientX - oDiv.disR),//距离右边 ???????????????resB = Math.abs(e.clientY - oDiv.disB);//距离下边 ???????var min = Math.min(resL, resB, resR, resT); ???????//console.log(resL, resB, resR, resT, min); ???????if (min === resL) { ???????????//console.log(‘左边移出‘); ???????????maskOut(‘left‘); ???????} else if (min === resT) { ???????????//console.log(‘上边移出‘); ???????????maskOut(‘top‘); ???????} else if (min === resR) { ???????????//console.log(‘右边移出‘); ???????????maskOut(‘right‘); ???????} else { ???????????//console.log(‘下边移出‘); ???????????maskOut(‘bottom‘); ???????} ???} ???function maskIn(direction) { ???????var attr = ‘marginTop‘, otherAttr = ‘marginLeft‘, step = -15, maxDis = ‘offsetHeight‘; ???????if (direction === ‘left‘ || direction === ‘top‘) { ???????????step = 15; ???????} ???????if (direction === ‘left‘ || direction === ‘right‘) { ???????????attr = ‘marginLeft‘; ???????????maxDis = ‘offsetWidth‘; ???????????otherAttr = ‘marginTop‘; ???????} ???????clearInterval(oMask.timer); ???????step < 0 ? oMask.style[attr] = oDiv[maxDis] + ‘px‘ : oMask.style[attr] = -oDiv[maxDis] + ‘px‘; ???????oMask.style[otherAttr] = 0; ???????oMask.style.display = ‘block‘; ???????oMask.timer = setInterval(function () { ???????????var disL = parseFloat(oMask.style[attr]) + step; ???????????if (step > 0) { ???????????????if (disL >= 0) { ???????????????????oMask.style.marginLeft = 0; ???????????????????oMask.style.marginTop = 0; ???????????????????clearInterval(oMask.timer); ???????????????} else { ???????????????????oMask.style[attr] = disL + ‘px‘; ???????????????} ???????????} else { ???????????????if (disL <= 0) { ???????????????????oMask.style.marginLeft = 0; ???????????????????oMask.style.marginTop = 0; ???????????????????clearInterval(oMask.timer); ???????????????} else { ???????????????????oMask.style[attr] = disL + ‘px‘; ???????????????} ???????????} ???????}, 10); ???} ???function maskOut(direction) { ???????clearInterval(oMask.timer); ???????oMask.style.marginLeft = 0; ???????oMask.style.marginTop = 0; ???????var attr = ‘marginTop‘, step = 15, maxDis = ‘offsetHeight‘; ???????if (direction === ‘left‘ || direction === ‘top‘) { ???????????step = -15; ???????} ???????if (direction === ‘left‘ || direction === ‘right‘) { ???????????attr = ‘marginLeft‘; ???????????maxDis = ‘offsetWidth‘; ???????} ???????oMask.timer = setInterval(function () { ???????????var disL = parseFloat(oMask.style[attr]) + step; ???????????if (step < 0) { ???????????????if (disL <= -oDiv[maxDis]) { ???????????????????oMask.style.display = ‘none‘; ???????????????????clearInterval(oMask.timer); ???????????????} else { ???????????????????oMask.style[attr] = disL + ‘px‘; ???????????????} ???????????} else { ???????????????if (disL >= oDiv[maxDis]) { ???????????????????oMask.style.display = ‘none‘; ???????????????????clearInterval(oMask.timer); ???????????????} else { ???????????????????oMask.style[attr] = disL + ‘px‘; ???????????????} ???????????} ???????}, 10); ???}</script></body></html>JS实现穿墙效果(判断鼠标划入划出的方向)
原文地址：http://www.cnblogs.com/Scar007/p/7799503.html