How to determine where a mouse exits an image

Question

On this page: http://www.colorz.fr/#!/work/

You can see the image scrolls into/out of the direction where the mouse enters and leaves. How is this done?

Answer 1

You can get the x/y coordinates of the cursor when the mouseleave event fires for the element:

$('#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');
    }
});​

Here is a demo: http://jsfiddle.net/bKVwR/1/