Question

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

示例：

类似于退出栏在Windows 8上的工作方式。您必须将鼠标悬停在屏幕顶部大约一秒左右，关闭最小化 要出现的选项。

我想知道是否可以使用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

Answer 2

您应该向mousemove添加body侦听器。此外，您应该创建一个布尔标志（变量或.data()。在该侦听器中，您检查鼠标是否位于页面的顶部 x px中，并将标志设置为该布尔值

如果该操作更改了标志，则

setTimeout

true显示内容。
clearTimeout表示超时并隐藏显示的内容，如果标志更改为false。

我相信你能够根据我的回答实现这一点。我很乐意提供更多说明，但我不会给你可复制的JS代码。

<强>伪代码：

flag = false

when mouse moved over page {
    if mouse y < value and flag = false {
        flag = true
        show after 1 second
    } 
    if mouse y > value and flag = true {
        flag = false 
        cancel showing
        hide if shown 
    } 
}

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

2 个答案: