如何旋转图像相对于鼠标位置？ [英] 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

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

$问题是，你只定义函数鼠标，并且只有当img.length> 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屋！