Javascript 如何确定鼠标退出图像的位置

在本页上：

---

您可以看到图像在鼠标进出的方向上滚动。这是如何做到的？

由于

鼠标出

事件和

屏幕x

/

屏幕y

/

客户端x

/

客户端

属性，可以使用简单的三角函数计算方向。

当

鼠标出

事件为客户端触发时，可以获得光标的x/y坐标要素：

$('#my-element').on('mouseleave', function (event) {

    //check to see what quadrant of the element the mouse has left the element
    //you could get a lot more complex than this but here's an example to get you going
    if (event.offsetX > 50 && event.offsetY > 50) {
        alert('bottom-right');
    } else if (event.offsetX > 50 && event.offsetY <= 50) {
        alert('top-right');
    } else if (event.offsetX <= 50 && event.offsetY <= 50) {
        alert('top-left');
    } else {
        alert('bottom-left');
    }
});​

$（“#我的元素”）.on（'mouseleave'，函数（事件）{
//检查鼠标离开元素的哪个象限
//你可能会得到比这复杂得多的东西，但这里有一个例子来帮助你
如果（event.offsetX>50&&event.offsetY>50）{
警报（“右下”）；
}否则，如果（event.offsetX>50&&event.offsetY它只对垂直和水平方向做出响应。如果您尝试使用对角线图片，则不起作用。
基于此，我认为您可以使用
mousemove
事件来提供x和y位移。如果x位移大于y，则表示用户在水平移动，反之亦然