如何旋转图像相对于鼠标位置？ [英] How to rotate image in relation to mouse position?

问题描述

我想要达到此效果： 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

如何移动轴/枢轴，使其完美运作？

0时才设置事件处理程序。脚本位于头部，并执行之前身体可以加载，所以没有图像。

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

I'm trying to do this effect: http://metatroid.com/articles at the top of the page but I can't get it to rotate with just the code they given.

 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);
 }

So I put this code under my javascript function and changed my image class to 'image' but it still wouldn't rotate.

Is there any other jquery or css markup associated with this or any tips you can give me to make this work? I'm still kind of new to this so any help is really appreciated. Thank you.

UPDATE: I managed to get the rotate effect to work, but it wouldn't rotate on the right axis. Here's the url for what I'm working on: http://www.lifetime-watches.com/test/i_watches.html

How do I move the axis/pivot so it'll work perfectly?

解决方案

Problem is that you only define the function mouse, and only set the event handler, if img.length is > 0. The script is located in the head, and executed before the body can load, so there is no image.

Fix - move the script into the body of the document after the where the image is defined. Also, your fiddle doesn't include jQuery (mootools instead). Once you fix those two things it will work.

这篇关于如何旋转图像相对于鼠标位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！