Question

我试图使div看起来像一个关闭的灯，当鼠标移动时，灯会亮起。

我完成了鼠标移动打开灯的部分。请看this fiddle。

jQuery代码：

$(document).mousemove(function() {
    $('div').addClass('glow');
});

我有2个问题

如果我把“正文”代替文件，它就不起作用，为什么？
如何检测鼠标停止？

Answer 1

1）'body'完美无缺，但你必须将鼠标移到身体上，直到窗口底部才会移动（是的，身体是一个奇怪的，有时甚至是语无伦次的东西））。

2）要检测鼠标停止，最简单的解决方案是使用setTimeout并定义延迟：

(function (){
    var i =0;
    var timer;
    $('body').mousemove(function() {
        clearTimeout(timer);
        // 'body' doesn't work instead of document
        i += 1;
        $('p').text(function() {
            return 'Moved: ' + i;
        });
        $('div').addClass('glow');
        timer = setTimeout(function(){$('div').removeClass('glow')}, 2000);
    });     
})();

Demonstration

Mousemove事件处理文档而不是'body'

1 个答案: