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

我正在尝试这样做： 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

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

修复 – 在定义图像的位置后将脚本移动到文档正文中。 此外，你的小提琴不包括jQuery（mootools）。 一旦你解决了这两件事，它就会起作用。