javascript - 检查 Cursor 是否悬停在顶部 X 数量的像素上？

Question

是否可以使用 Javascript/jQuery 检查您的光标是否悬停在网页的前 20 个像素左右？

示例:

Similar to how the exit bar works on windows 8. You have to hover at the top of the screen for a second or so for the close minimize options to appear.

我想知道这是否有可能完全用 Javascript/jQuery 复制，然后允许 jQuery.fadeIn() 或 jQuery.slideDown() 发生。

希望这是可能的!

Answer 1

当然，使用鼠标事件并检查 e.pageY 是否小于 20px，您的鼠标是否位于前 20 个像素等。

var isOnTop = false;

$(window).on('mousemove', function(e) {
    isOnTop = e.pageY < 20;
});

我再举几个例子，鼠标在顶部停留一秒会触发事件

$(window).on('mousemove', function(e) {
    clearTimeout($(this).data('timer'));

    if ( e.pageY < 20 ) {
        $(this).data('timer',
            setTimeout(function() {
                $('#top').slideDown()
            }, 1000)
        );
    }
});

$('#top').on('mouseleave', function() {
    $(this).slideUp();
});

FIDDLE

顶部的任何移动都需要更多的代码，以及另一个变量来防止删除计时器

$(window).on('mousemove', function(e) {

    if ( e.pageY < 20 ) {
        if ( ! $(this).data('isSet') ) {
            $(this).data('timer',
                setTimeout(function() {
                    $('#top').slideDown()
                    $(this).data('isSet', false);
                }, 1000)
            ).data('isSet', true);
        }
    } else {
        clearTimeout($(this).data('timer'));
        $(this).data('isSet', false);
    }
});

$('#top').on('mouseleave', function() {
    $(this).slideUp();
});

FIDDLE