jquery - 如何使用 jQuery 旋转图像？

Question

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

代码如下：

    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。