Как определить, где мышь выходит из изображения

Question

На этой странице: http://www.colorz.fr/#!/work/

Вы можете видеть, как изображение прокручивается в / из направления, где мышь входит и уходит.Как это сделать?

Answer 1

Вы можете получить координаты x / y курсора, когда для элемента запускается событие mouseleave:

$('#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

Он реагирует только на вертикальное и горизонтальное направления. Если вы попробуете диагональные картинки, это не сработает. Исходя из этого, я думаю, что вы можете использовать событие mousemove, чтобы получить смещения x и y. Если смещение х больше, чем у, это означает, что пользователь движется горизонтально и наоборот.

Answer 3

Благодаря событию mouseout и свойствам screenX / screenY / clientX / clientY можно рассчитать направление с помощью простой тригономики.