Question

当鼠标离x距离时，我想要一个div移动。

$(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;

        distance = calculateDistance(element, mX, mY);

        if (distance<100) {
            $(element).css("left", moveAcc + "px");
            moveAcc = moveAcc + 1;
        }         
    });

JSFiddle - 你必须选择jquery 1.11.0库

但是因为条件在 mousemove函数中，它只能在鼠标移动时移动元素，而不是移动鼠标在x内时距离。

为此，我需要一些更新的东西，检查每一帧是否满足条件。

示例，在我的项目的Pascal中，我将整个代码放在重复之间，直到（）

在ActionScript中有addEventListener（Event.ENTER_FRAME，function）;

我可以在Javascript中使用哪些内容？您还有什么方法可以提出？ - 我确实发现了这个Javascript Version of AS3 enterframe event但它已经4岁了，现在差不多了。

将代码放在setInterval函数中是否可以？

Answer 1

您正在寻找requestAnimationFrame方法。

它做什么？在下一帧渲染之前，它将执行传递给它的方法。但请注意，并非所有浏览器都支持它，您可以使用polyfill或只使用setInterval

示例：

function checkDistance () {
    \\ Do your job here
    window.requestAnimationFrame(checkDistance);
}
window.requestAnimationFrame(checkDistance);

更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 2

您有两种方法可以做到这一点：

在文档对象上添加事件侦听器并测量元素位置和鼠标位置，然后检查当前鼠标位置是否在这些位置之间。（如果你只有一个元素，这种方式不建议）
直接在元素上添加一个事件监听器，并检查当前鼠标位置是否与您想要的位置完全相同。

如果您有一个写得很好的鼠标事件监听器，那么您不需要使用间隔更新该函数。

Answer 3

我会尝试在mousemove方法之外声明你的鼠标X和Y变量，即使你的鼠标停止移动，最后一个位置（当前真正的）仍然可以访问..

var mX;
var mY;
$(document).mousemove( function(e) {
    mX = e.pageX; 
    mY = e.pageY;
});

然后，您可以在间隔上使用第二种方法来检查这些变量中的值，并相应地移动该框。

setInterval(function(){

    // Code to calculate distance etc.

    distance = calculateDistance(element, mX, mY);

    if (distance<100) {
        $(element).css("left", moveAcc + "px");
        moveAcc = moveAcc + 1;
    }   

},100); // Whatever interval you see fit instead of 100ms

自动更新Javascript

3 个答案: