如何根据鼠标位置旋转图像？

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标记，或者您可以给我任何提示以使其正常工作？我对此仍然很陌生，因此真的感谢任何帮助。谢谢。

更新： 我设法使旋转效果起作用，但它不能在正确的轴上旋转。 这是我正在处理的内容的网址：http://www.lifetime-watches.com/test/i_watches.html

我该如何移动轴/支点以使其完美工作？

- monogatari

---

如果文件已经托管，您能否提供文件链接？ - HyderA

我没有收到任何错误信息，并且我已经将链接放在http://jsfiddle.net/KmgNJ/1/上。谢谢。 - monogatari

修复了你的 JSFiddle http://jsfiddle.net/22Feh/ - Amin Eshaq

这对我来说很好用，jsFiddle。 - Andrew

Answer 1

问题在于您只定义了鼠标函数，并且仅在img.length大于0时设置事件处理程序。脚本位于head中，在body加载之前执行，因此没有图像。

解决方法是将脚本移动到文档的body中，在定义图像的位置之后。另外，您的fiddle没有包括jQuery（而是mootools）。一旦您解决了这两个问题，它就会正常工作。

- James

---

谢谢！这解决了问题！我还有很多关于jquery需要学习。非常感谢。 - monogatari

更新：我设法让旋转效果起作用了，但它不会在正确的轴上旋转。这是我正在处理的网址：http://www.lifetime-watches.com/test/i_watches.html如何移动轴心/支点，使其完美运作？ - monogatari

这是因为图像的中心不再是旋转点。你需要进行大量的数学计算来修复它，或者修改图像，使其中心成为旋转点。如果你想要一个完美的手表外观，你就必须制作一个完美的bighand.png。图像的高度和宽度应该是奇数，两种情况下的中间像素都应该是手表指针孔的正中心。如果圆的直径是偶数个像素，你会得到一个晃动效果。不要在手表指针上做任何光影效果，因为当它倒置时看起来很奇怪。 - James

这是您原始fiddle的一个（稍微摇晃的）示例：http://jsfiddle.net/22Feh/5/ - James