美文网首页
纯JS判断鼠标移入移出元素方向

纯JS判断鼠标移入移出元素方向

作者: 小椰子表姐 | 来源:发表于2018-05-15 17:51 被阅读106次

最近扒扒网站练习一下, 看到图虫首页有一个效果挺好看的. 不过需要判断鼠标移入移出元素时的方向. 也搜了很多答案, 但是针对于简单的一个几个 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 地址

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


图虫首页效果图

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

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

相关文章

网友评论

      本文标题:纯JS判断鼠标移入移出元素方向

      本文链接:https://www.haomeiwen.com/subject/rhvjdftx.html