Question

当鼠标垂直位于文档顶部且文档中心水平位置时，有没有办法执行函数？

当鼠标接近顶端中心时执行js代码/功能怎么样？

以下是我如何考虑这样做（在jQuery和vanilla js中），但如果有更好的方法请分享：

$(document).mousemove(
    function(e){
        if((e.pageY=0) && (e.pageX=)){
            //run function
        }
    }
}

我离开e.pageX应该等于条件的原因是我不知道怎么做50％或中间。

另外，我相信，只有当鼠标正好位于顶部和中心时才会运行此功能。

当鼠标接近顶部中心时，是否有人知道逐步执行它？

Answer 1

这是我刚才想到的超级简单的解决方案。在HTML中添加一个空的div，正确定位，使其opacity: 0隐身，然后收听mouseover事件：

<div class="detector"></div>

CSS：

.detector {
    position: absolute; // or fixed, depending on needed behaviour
    top: 10px;
    left: 50%;
    height: 20px;
    width: 20px;
    margin-left: -10px;
    opacity: 0;
}

JS：

$('.detector').mouseover(function() {
    alert('Mousemove detected!');
});

http://jsfiddle.net/MhPp8/

Answer 2

您可以尝试以下代码。请记住，如果您不希望浏览器窗口调整大小，则可以将$(window).width()/2分配给mousemove绑定之外的变量，以避免在每次更新时查找窗口宽度。需要使用Math.floor或Math.ceil来向下/向上计算水平中心以避免使用十进制数字。

示例1（水平中心是动态的。在鼠标移动时将始终重新计算）：

$(document).on('mousemove',function(e){
    if((e.pageY==0) && (e.pageX==Math.floor($(window).width()/2))){
        //run function
    }
});

示例2（水平中心保持静止，即执行时的计算值）：

var hCenter = Math.floor($(window).width()/2);
$(document).on('mousemove',function(e){
    if((e.pageY==0) && (e.pageX==hCenter)){
        //run function
    }
});

示例3（在窗口调整大小时更新hCenter）：

// calculate horizontal center at page load
var hCenter = Math.floor($(window).width()/2);

// update hCenter every time the window is resized
$(window).resize(function(){
    hCenter = Math.floor($(window).width()/2);
});

$(document).on('mousemove',function(e){
    if((e.pageY==0) && (e.pageX==hCenter)){
        //run function
    }
});

当鼠标朝向文档的顶部中心或顶部中心时运行jQuery

2 个答案: