js用斜率判断鼠标进入div的四个方向

网上大部分判断鼠标移入div移入移出都是使用一下方法：

这个方法确实十分奇特，使用起来十分方便。

后来自己看了一些文章，看到有另一种以斜率的方法来判断鼠标的移动方向。

上图是此方法的示意图，以浏览器左上角做原点，水平轴作为x轴，往右为正；竖直轴作为y轴，向上为正。

中间的div的左上角坐标（x1,y1）,右下角坐标（x2,y2）,中心点的坐标（x0,y0）。

设如图两点的斜率为k（k<0），关于x轴对称的斜率为-k。

另外鼠标刚移入时，鼠标的坐标设为（x,y）；

window.onload = function(){                var oDiv = document.getElementById('div1');        var x1 = oDiv.offsetLeft,          y1 = -oDiv.offsetTop,   //注意坐标，所有的y坐标都是负数          x2 = x1 + oDiv.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('右');            }else{              alert('左');            }          }else{            //注意此处y是负数，判断上下的方法同上            if(y > y0){              alert('上');            }else{              alert('下');            }          }        }              }

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：js用斜率判断鼠标进入div的四个方向

关键词：JS