Question

我开发了Mac Style Doc菜单。当光标距离底部100px时，将显示doc菜单。否则菜单是隐藏的。现在问题是我只能在光标静止时才能使用e.clientX和e.clientY。

有什么方法可以解决这个问题吗？下面是我用于动画的代码。

$(window).mousemove(function (e) {
    if ((window.innerHeight - e.clientY) <= 50) {
        $('.wrap').stop(true);
        $('.wrap').animate({
            bottom: 5
        }, 1000);
    } else {
        $('.wrap').stop(true);
        $('.wrap').animate({
            bottom: -100
        }, 1000);
    }
});

Answer 1

为了简化性能，您可以稍微延迟事件，例如：

var moveTimer = null;
$(window).on('mousemove', function (e) {
    clearTimeout(moveTimer);
    moveTimer = setTimeout(function () {
        // only runs when the user stops moving the mouse for 10ms
    }, 10);
});

请参阅： A simple prototype of the dock (JSFIDDLE)

Answer 2

感谢您的所有建议。

在这个问题花了好几个小时之后，我觉得我应该分享解决方案。我没有使用Jquery，而是使用了平面JavaScript事件监听器，并在条件匹配时添加了回调函数。

如何添加事件列表器的简单示例。如果任何人需要整个代码，请告诉我，我也会添加。

var myListener = function (e) {

    document.body.innerHTML = 'Mouse first moved: ' + e.clientY +"---"+e.clientX
};

document.addEventListener('mousemove', myListener, false);

链接到小提琴

http://jsfiddle.net/JQBmA/#&togetherjs=wUsP1yGylU

此致

鼠标移动事件问题

2 个答案: