Question

在此页面上：http://www.colorz.fr/#!/work/

您可以看到图像滚动进出鼠标进入和离开的方向。这是怎么做到的？

Answer 1

当mouseleave事件触发元素时，您可以获取光标的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');
    }
});

以下是演示：http://jsfiddle.net/bKVwR/1/

Answer 2

由于mouseout事件和screenX / screenY / clientX / clientY属性，可以使用简单的三角法计算方向。< / p>

Answer 3

它只响应垂直和水平方向。如果您尝试对角线图片，它不起作用。因此，基于此，我认为您可以使用mousemove事件为您提供x和y位移。如果x displace大于y，则表示用户正在水平移动，反之亦然。

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

3 个答案: