javascript - 如果鼠标到达屏幕的最左侧执行操作

Question

嗨，我正在寻找一种方法，以便如果我的鼠标移动到屏幕的最左侧或最右侧，将执行一个动作，有没有办法用 html css jquery 等来做到这一点？就像我试图让我的导航栏显示我的鼠标何时到达屏幕的左端一样。任何帮助将非常感激

Answer 1

见这里http://api.jquery.com/mousemove/

根据示例，您可以使用 pageX 和 pageY 来确定鼠标的位置。你可能有这样的事情：

$("body").on("mousemove",function(event) {
    if (event.pageX < 50) {
        // do something
    }
});

Answer 2

没有必要让它过于复杂。只需将您的菜单定位为透明层，悬停键即可展开并显示菜单链接。

#menu { overflow: hidden; 
background-color: transparent; 
width: 20px; 
height: 100%;    
position: absolute; top: 0px; left: 0px; }
#menu:hover { width: auto; background-color: red; height: 100% }
.link { margin-left: 20px; display: block; }

<div id="menu">
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
</div>

这是一个展示它如何工作的小提琴。http://jsfiddle.net/6cgZZ/ 如果你想锁定菜单，那么你可能会想使用 JS 来触发鼠标悬停事件，但我仍然会使用透明元素作为触发器。在这种情况下，您可以使用 DOM 动态更改菜单的属性，例如可见性、宽度等。