如何相对于鼠标位置旋转图像？

我正在尝试做这样的效果：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 函数下并将我的图像类更改为“图像”，但它仍然不会旋转。

是否有任何其他与此相关的 jquery 或 css 标记或您可以给我的任何提示 让这个工作？我对此仍然很陌生，所以非常感谢任何帮助。谢谢。

UPDATE: 我设法使旋转效果发挥作用，但它不会在右轴上旋转。 这是我正在做的事情的网址：http://www.lifetime-watches.com/test/i_watches.html

如何移动轴/枢轴才能完美工作？

问题是，如果 img.length > 0，您只定义了鼠标函数，并且只设置了事件处理程序。脚本位于头部，并在正文加载之前执行，因此没有图像。

修复 - 将脚本移至文档正文中定义图像的位置之后。另外，你的小提琴不包含 jQuery（而是 mootools）。一旦你解决了这两件事，它就会起作用。