相关疑难解决方法(0)

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

我正在尝试这样做: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);
 }
Run Code Online (Sandbox Code Playgroud)

所以我把这个代码放在我的javascript函数下,并将我的图像类改为'image',但它仍然不会旋转.

是否有任何其他jquery或css标记与此相关或任何提示,您可以让我使这项工作?我对此仍然有点新意,所以任何帮助都非常感谢.谢谢.

更新:我设法让旋转效果工作,但它不会在右轴上旋转.这是我正在做的工作的网址:http://www.lifetime-watches.com/test/i_watches.html

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

javascript css jquery css3

6
推荐指数
1
解决办法
7764
查看次数

标签 统计

css ×1

css3 ×1

javascript ×1

jquery ×1