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

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/