文章 - 鼠标进入容器方向检测

[color=#002060][color=#00b0f0]###一、背景来一波[color=#00b0f0][/color][/color][/color]

之前用过的难懂版！9[/color]

      鼠标进入容器方向检测——鼠标从（上右下左）哪一边进入的盒子？
      之前一直用麻友的代码，如下：
     **javascript 代码**

      原理：以div容器的中心点作为圆心，以高和宽的最小值作为直径画圆，将圆以[π/4，3π/4)，[3π/4，5π/4），[5π/4，7π/4)，[-π/4，π/4)划分为四个象限，鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下，右，上，左。如下图所示

鼠标进入容器方向检测
javascript 代码

      计算x坐标值时，如果点原来的x坐标的绝对值大于圆的半径值，则按 h/w 这个比例进行缩小，使得到的点的位容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。
       ((Math.atan2(y, x) * (180 / Math.PI)将点的坐标对应的弧度值换算成角度度数值，这里加上180并非必要，只是为了使得到的0,1,2,3能够与习惯性的上，右，下，左的位置对照，如果不加上180，得到的0,1,2,3就会分别对应下，右，上，左。
       [color=#00b0f0]这样的实现也很简洁，就是不容易想明白，对于我这种高中数学忘光光的人儿，总是不太舒服的。###
     ###（没有攻击原作者的意思，只是我数学太菜，贡献代码的宝宝万万岁！！79）
       我觉得没有必要这么复杂，下面的是我的实现方式，各位麻友来看看有没有问题

[color=#00b0f0]###二、翠花，上酸菜[color=#92cddc][/color][/color]
html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 300px;
            background-color: red;
            margin:200px;
                        line-height:200px;
                        text-align:center;
                        color:green;
                        font-size:30px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById("box");
    box.onmouseenter = function(event){
        var event=event||window.event;
        box.innerHTML = direction(event,box,box.offsetLeft,box.offsetTop);
    }
    function direction(event,obj,objPageX,objPageY){
        //鼠标页面坐标
        var pageX=event.pageX;
        var pageY=event.pageY; 
        //盒子中心位置的坐
        var centerX = objPageX + box.offsetWidth/2;
        var centerY = objPageY + box.offsetHeight/2;
        //鼠标相对于盒子中心位置的坐标
        var objx = pageX-centerX;
        var objy = pageY-centerY;

// kFix:对角线斜率  kMouse:鼠标相对于盒子中心斜率
        var kFix = box.offsetHeight / box.offsetWidth;
        var kMouse = objy / objx;
        if (kFix >= Math.abs(kMouse)) {
            return objx >= 0 ? "right" : "left";
        } else {
            return objy >= 0 ? "bottom" : "top";
        }
    }
</script>
</body>
</html>

    下面我来解释一下我是怎么想的
    1，同样，以盒子的中心（centerX ，centerY）来创建一个坐标系
    2，计算出鼠标进入盒子的时候的页面坐标 （pageX，pageY）
    3，计算出鼠标进入点相对于本坐标系的坐标

javascript 代码

    4，计算出来鼠标进入的点和坐标原点（盒子中心）连线在坐标系中的斜率（kMouse ），和对角线坐标（kFix）

javascript 代码

   5，最后判断方向
            5.1  若kMouse 大于零，则鼠标从以下这几个区域进入盒子

鼠标进入容器方向检测

                如果 kMouse 大于 kFix 则鼠标从以下两个方向进入

鼠标进入容器方向检测

            再通过点坐标的纵坐标 objy  得出鼠标从什么区域进入，进而得出哪一条边
           **javascript 代码**

            5.2   kMouse 大于零时分析逻辑与上雷同
          **javascript 代码**

        5.3  最后总结规律，合并代码得简洁版
      **javascript 代码**

   应该有所偏颇，请各位指正！！

鼠标进入容器方向检测

之前用过的难懂版！9[/color]

评论 ( 2 )

最新评论

鼠标进入容器方向检测

之前用过的难懂版！9[/color]

评论 ( 2 )

最新评论

欢迎您回来

创建账号

找回密码