如何使用jQuery将图像旋转到位？

我试图使图像每次点击旋转到位（图像是一个老式的电视旋钮）。 尽管我付出了最大的努力，但我无法让它发挥作用。

代码如下：

var value = 0 $("#img").rotate({ bind: { click: function(){ value +=90; $(this).rotate({ animateTo:value}) } } 

}）;

Answer 1

我提供了一个jsFiddle，它会在每次单击鼠标后使div旋转。

基本上，这是来自jqueryrotate.js插件的示例5 。

参考： jsFiddle

Answer 2

有一个jQuery补丁，可以让你做这样的事情： http ： //www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

 $('#img').click(function(){ $(this).animate({rotate: '+=10deg'}, 0); }); 

或者这个插件： http ： //code.google.com/p/jqueryrotate/允许以下内容：

 $("#img").rotate({ bind: { click: function() { $(this).rotate({ animateTo: (parseInt($(this).getRotateAngle()) + 10), easing: $.easing.easeInOutExpo }) } } });​ 

（ http://jsfiddle.net/mFY22/3/ ）

Answer 3

这是一个使用名为jqueryrotate的jquery插件的快速示例

在这里查看jsfiddle。