如何在鼠标点击页面底部时触发事件

时间:2014-03-29 12:36:03

标签: javascript jquery html css

我正在尝试实现一个与Windows任务栏类似的菜单栏。我想模仿的属性之一是当鼠标进入页面底部时隐藏/显示。 如何检测鼠标何时位于页面底部?

首先,是否有一个JQuery插件或类似的库已经实现了这个动作?

一种可能的解决方案是在底部使用一个不可见的div,当鼠标进入时触发事件。我想知道是否有比这更好的解决方案。

2 个答案:

答案 0 :(得分:5)

如果使用jQuery不是问题

window.onmousemove= function(e){
 if(e.y>= $(document).height()-10)
    alert('you did hit the bottom!');
}

会的。检查此Fiddle

注意:我已经给了10px的喘息空间

更新:摆弄像div这样的任务栏 - Updated Fiddle

答案 1 :(得分:-1)

你可以这样做 - >

<强> JQUERY

$(document).ready(function(){
  $(document).mousemove(function(event){
    var docheight = $( document ).height() - 10; //subtracted with 10 just to be safe with checking the condition below

    if(event.pageY > docheight){
        alert("you have reached socument bottom");
         //write your code here
    }

  });
});

JSFIDDLE DEMO