Как повернуть изображение относительно положения мыши?

Question

Я пытаюсь сделать этот эффект: http://metatroid.com/articles вверху страницы, но я не могу заставить его вращаться только с кодом, который они дали.

 var img = $('.image');
 if(img.length > 0){
     var offset = img.offset();
     function mouse(evt){
         var center_x = (offset.left) + (img.width()/2);
         var center_y = (offset.top) + (img.height()/2);
         var mouse_x = evt.pageX; var mouse_y = evt.pageY;
         var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
         var degree = (radians * (180 / Math.PI) * -1) + 90; 
         img.css('-moz-transform', 'rotate('+degree+'deg)');
         img.css('-webkit-transform', 'rotate('+degree+'deg)');
         img.css('-o-transform', 'rotate('+degree+'deg)');
         img.css('-ms-transform', 'rotate('+degree+'deg)');
       }
$(document).mousemove(mouse);
 }

Таким образом, я поместил этот код в свою функцию javascript и изменил свой класс изображения на 'image', но он по-прежнему не вращался.

Есть ли какая-либо другая разметка jquery или css, связанная с этим или какими-либо советами, которые вы можете дать мне, чтобы сделать эту работу?Я все еще новичок в этом, поэтому любая помощь очень ценится.Спасибо.

ОБНОВЛЕНИЕ : мне удалось заставить эффект вращения работать, но он не вращался по правой оси.Вот URL для того, над чем я работаю: http://www.lifetime -watches.com / test / i_watches.html

Как мне переместить ось / ось, чтобы она работала идеально

Answer 1

Проблема в том, что вы определяете только функцию mouse и устанавливаете обработчик событий, только если img.length> 0. Сценарий находится в голове и выполняется до того, как тело может загружаться, поэтому изображение отсутствует.

Исправить - переместить скрипт в тело документа после того, как определено изображение.Кроме того, ваша скрипка не включает в себя jQuery (вместо mootools).Как только вы исправите эти две вещи, все заработает.