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

如何移动轴/枢轴以使其完美运行？

Answer 1

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

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

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

1 个答案: