最近扒扒网站练习一下, 看到图虫首页有一个效果挺好看的. 不过需要判断鼠标移入移出元素时的方向. 也搜了很多答案, 但是针对于简单的一个几个 div 是有效果, 针对我当前的项目就没了效果, 后来我寄几改动了些, 终于成了~
现分享一下子.
效果图:

移入出现黑框.gif

有好几种计算方式, 原理请找其他文章看一下~
有写的比较清楚的, 建议看懂原理, 才能够对症更改问题~
参考网址1
参考网址2
参考网址3
用斜率计算

在这贴上我的代码:
我封装在工具类里了, 这里回调函数就是把方向值回调回去了

function mouseDirection(wrap, ev, fn) {
    var dirs = ["top", "right", "bottom", "left"];
    var w = wrap.offsetWidth;
    var h = wrap.offsetHeight;
    var toTop = wrap.getBoundingClientRect().top + document.documentElement.scrollTop;
    var x = (ev.pageX - wrap.getBoundingClientRect().left - (w / 2)) * (w > h ? (h / w) : 1); //获取当前鼠标的x轴位置 
    var y = (ev.pageY - toTop - (h / 2)) * (h > w ? (w / h) : 1);
    var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左” 
    console.log("方向:" + direction);
    var res = Math.atan2(y, x) / (Math.PI / 180);
    console.log("角度:  " + res);
    if(fn) {
        fn(dirs[direction]);
    }
}

完整版 DEMO 地址

添加了动画的版本效果图:

图虫首页效果图

添加动画的源码请点这里~
添加动画的源码请点这里~

有问题可以留言~
请勿随意转发, 尊重劳动成果~✌️✌️✌️