JS实现穿墙效果(判断鼠标划入划出的方向)

Posted 2020-10-13 Scar007
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现穿墙效果(判断鼠标划入划出的方向)相关的知识，希望对你有一定的参考价值。
<!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实现穿墙效果(判断鼠标划入划出的方向)的主要内容，如果未能解决你的问题，请参考以下文章