JS用斜率判断鼠标四个方向进入DIV的方法

在互联网上，大多数人使用以下方法来判断鼠标是移入还是移出div:

这个方法真的很奇怪，用起来也很方便。

后来看了一些文章，看到有另外一种方法可以通过坡度来判断鼠标的移动方向。

上图为该方法示意图，浏览器左上角为原点，横轴为X轴，右侧为正；纵轴为y轴，向上方向为正。

中间div的左上角坐标(x1，y1)、右下角坐标(x2，y2)和中心点坐标(x0，y0)。

设两点的斜率为k(k0)，关于x轴对称的斜率为-k。

另外，当鼠标刚移入时，鼠标的坐标被设置为(x，y)；

window . onload=function(){ var oDiv=document . getelementbyid(' div 1 ')；Varx1=odiv。offsetleft，y1=-odiv。offsettop，//注意坐标，所有y坐标均为负x2=x1odiv。offsetwidth，y2=y1-odiv。offsetheight，//相同的y坐标为负x0=(x1 x2)/2，y0=(y1 y2)/2 var k=(y2-y1)/(x2-x1)；//斜率k//alert (-k) odiv。onmouseover=function(e){ var e=e | | window . event；Var x=e.clientX，//鼠标刚移入div，记录当前x坐标y=-e . clienty；//鼠标刚移入div，记录当前y坐标var K=(y-y0)/(x-x0)；//K是鼠标移入点和中心点的斜率。//当k大于k小于-k时，必须左右移入；当移入点的x坐标大于中心点时，为右移；if(k k k-k){ if(x x0){ alert(' right ')；} else { alert(' left ')；}}else{//注意这里y是负数，上下判断方法同上if(y y0){ alert(' up ')；} else { alert(' down ')；}}}}首先我们计算斜率k和-k，主要通过鼠标输入div坐标到中心点之间的斜率来判断‘左右’或者‘上下’；

从这个图可以看出，当鼠标移入点和中心点的斜率k在k和-k之间时，可以判断它在左右移动。因此，k在其他区间上下移动；

至于如何区分左右，就看移入点的x坐标值是否大于中心点的x0值，大于则表示右移，小于则表示左移。

上下判断同左右原则，但要注意Y坐标是负的，大小不要错。

以上就是边肖介绍的JS用斜率判断鼠标进入DIV四个方向的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！