2

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

当鼠标接近顶部中心时执行那个js代码/函数怎么样？

以下是我的想法（在 jQuery 和 vanilla js 中），但如果有更好的方法，请分享：

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

我在条件中留下 e.pageX 应该等于的原因是我不知道如何做 50% 或中间。

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

有谁知道随着鼠标接近顶部中心逐渐执行它？

4

2 回答 2

2

这是我刚刚想到的超级简单的解决方案。在 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/

于 2013-03-09T18:10:50.993 回答
1

你可以试试下面的代码。请记住，如果您不希望浏览器窗口调整大小，则可以分配$(window).width()/2给绑定之外的变量mousemove，以避免在每次更新时查找窗口宽度。需要使用Math.floororMath.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
    }
});
于 2013-03-09T18:19:58.560 回答