Как двигать элементы относительно курсора мыши?

Question

[Григорий Каляшов]

Поясню на наглядном примере. Есть изображение: ,которое находится в контейнере. Как сделать так,чтобы при наведении курсора в область контейнера глаза этого парня,зрачки точнее, поворачивались в сторону курсора?

Answer 1

[Петруша Укропов]

https://github.com/felixmc/jQuery-xeyes

Comments

[Григорий Каляшов]

Спасибо) То,что нужно. Все получилось)

Answer 2

[Сергей Мельников]

надо отследить событие "mousehover" на этом элементе, получить из события координаты курсора и просчитать по координатам, в какой стороне от глаз находится курсор и на основании этих вычислений переместить зрачки.
profit )

Comments

[Григорий Каляшов]

А как переместить зрачки относительно курсора и сделать так ,чтобы они не выходили за область очков?

[Сергей Протько]

@kalyashov, а это уже нужно считать относительно цетра и вписывать в окружность (следить за тем что бы расстояние до центра не превышало радиуса не так уж и сложно)

Answer 3

[Сергей Протько]

mousemove - отслеживать положение курсора (можно на ограниченную область наложить).
Положение объекта высчитывать, исходя из расстояния от центра окружности до курсора, по этой оси зрачек и двигать. Ограничивая по радиусу окружности.