Javascript鼠标移入方向感知

这篇文章主要介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,需要的朋友可以参考下。
判断鼠标移入方向的功能函数

function getDir(ev, ele) {
            var l = ele.getBoundingClientRect().left;
            var t = ele.getBoundingClientRect().top;
            var w = ele.getBoundingClientRect().width;
            var h = ele.getBoundingClientRect().height;
            var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1);
            var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1);
            var deg = Math.atan2(y, x) / (Math.PI / 180);
            var d = (Math.round((deg + 180) / 90) + 3) % 4;
            return d;
            // d的值{上:0,右:1,下:2,左:3}
        }

整体代码：
html:

  <div id="container">
        <img src="./bg.jpg" alt="">
        <p class="ps">故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的职业。在岸本齐史笔下的忍者世界中，每一位年轻的忍者都在开拓着属于自己的忍道。
        </p>
    </div>

CSS:

*{
    margin: 0;
    padding: 0;
}

#container{
    width: 400px;
    height: 200px;
    position: relative;
    margin-top: 100px;
    margin-left: 200px;
    overflow: hidden;
    
}
#container img{
    width: 100%;
    height: 100%;
    transition: 0.5s;
}
#container p{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    /* top: 0; */
    background: rgba(0, 0, 0, .7);
    color: #ccc;
    font-size: 14px;
    line-height: 24px;
    
}
#container:hover img{
    transform: scale(1.1);
}

JS:

 window.onload = function () {
            var box = document.getElementById('container');
            var ps = document.getElementsByClassName('ps');
            var pos=[
                {left:0,top:'-100%'},
                {left:'100%',top:0},
                {left:0,top:'100%'},
                {left:'-100%',top:0}
            ]
            box.onmouseenter = function(ev){
                var dir = getDir(ev,this);
                ps[0].style.transition='';
                ps[0].style.left=pos[dir].left;
                ps[0].style.top=pos[dir].top;
                setTimeout(function(){
                    ps[0].style.transition='.3s';
                    ps[0].style.left=0;
                    ps[0].style.top=0;
                },1000/60)
            }
            box.onmouseleave = function(ev){
                var dir = getDir(ev,this);
                setTimeout(function(){
                    ps[0].style.transition='';
                    ps[0].style.left=pos[dir].left;
                    ps[0].style.top=pos[dir].top;
                },100)
            }
        }
        function getDir(ev, ele) {
            var l = ele.getBoundingClientRect().left;
            var t = ele.getBoundingClientRect().top;
            var w = ele.getBoundingClientRect().width;
            var h = ele.getBoundingClientRect().height;
            var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1);
            var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1);
            var deg = Math.atan2(y, x) / (Math.PI / 180);
            var d = (Math.round((deg + 180) / 90) + 3) % 4;
            return d;
            // d的值{上:0,右:1,下:2,左:3}
        }

来源：CSDN

作者：Jeslie-He

链接：https://blog.csdn.net/Hhjian524/article/details/104516853