如何检测鼠标在特定元素上的方向

我目前有一个检测鼠标输入方向的功能。 它会为每个部分返回一个整数（0-3），如下所示。

我试图弄清楚如何改变这个函数来产生一个基于这个插图的输出：

基本上，我只想弄清楚用户是从左边还是右边进入图像。 我已经尝试了几次尝试和错误，但我不擅长这种数学。

我以安装了一个控制台输出的JSFiddle为例。

确定方向的功能是：

function determineDirection($el, pos){
    var w = $el.width(),
        h = $el.height(),
        x = (pos.x - $el.offset().left - (w/2)) * (w > h ? (h/w) : 1),
        y = (pos.y - $el.offset().top  - (h/2)) * (h > w ? (w/h) : 1);

    return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180)) / 90 + 3) % 4;
}

pos是一个对象： {x: e.pageX, y: e.pageY} ， $el是包含目标元素的jQuery对象。

---

替换return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180)) / 90 + 3) % 4; return (x > 0 ? 0 : 1);

我更喜欢的另一个选项（更简单的想法）：

function determineDirection($el, pos){
    var w = $el.width(),
        middle = $el.offset().left + w/2;        
    return (pos.x > middle ? 0 : 1);
}

链接地址: http://www.djcxy.com/p/71487.html

上一篇: How to detect mouseenter direction on a specific element

下一篇: webkit box vs boxflex