javascript - 当鼠标距元素x距离时，Jquery如何触发功能？

Question

我想在鼠标距离元素 X 距离时运行一个函数。

我假设应该移动 mousemove 事件，但由于元素可能并不总是在同一个地方，我不确定如何获得鼠标相对于元素的位置？

有没有人有类似的例子？

Answer 1

var mX, mY, distance;
$element  = $('#YourElementID');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        // do your stuff with distance

    });

Answer 2

您将需要绑定到mousemove事件，将元素角的坐标存储在全局变量中，并继续检查鼠标移动的每个像素，直到当前鼠标位置和对象坐标之间的向量长度为​​ X。这将是触发您绑定某些功能的自定义事件的时刻。

我不知道已经有一个插件可以做到这一点，所以请务必在此处发布指向您编写的插件的链接。:)