如何使用jQuery在原地旋转图片？

Question

我试图让一张图片每次点击都在原地旋转（这张图片是一个老式电视旋钮）。尽管我已经尽力了，但我无法让它实现。

以下是代码：

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

});

- gfy

---

完成了！抱歉，我是新来的，所以花了一点时间。再次感谢你的帮助 =) - gfy

谢谢。另外，一旦您达到15个声望（我相信那是级别），那就可以投票了，这意味着“这个答案很有用”。干杯！ - arttronics

Answer 1

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

本质上，这是从jqueryrotate.js插件的示例5.

参考：jsFiddle

- arttronics

---

说实话，它仍然不起作用（但我仍然感谢您的帮助）。我不知道我做错了什么或者遗漏了什么？我甚至有“jQueryRotate(jsRotate) v.2.2的当前稳定版本”。@arttronics，你是正确的。就是那个例子[http://code.google.com/p/jqueryrotate/wiki/Examples#Example_5]。再次感谢您的任何帮助。 - gfy

@arttronics- 它可以工作！但是- 图像不像jsFiddle中的示例一样在原地旋转，而是沿着更大的圆形路径移动，就像围绕时钟的半径一样。不知道为什么。我使用了给出的完全相同的代码。有任何想法吗？ - gfy

你的代码在 jsFiddle 上可以运行，但是当我在 Chrome 的测试页面上运行时，它的操作就像我上面提到的那样。这是 jsFiddle 的链接：（http://jsfiddle.net/UTvj6/）。我添加了一个不同于我正在使用的图像，但除此之外，所有代码都是相同的。 - gfy

太好了！搞定了。非常感谢您抽出时间来帮助我。您非常友善。 - gfy

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/)

- gherkins

Answer 3

这里有一个快速示例，使用了一个名为jqueryrotate的jQuery插件。

在这里查看jsfiddle。

- Trufa

---

@arttronics 我发布了一个更新，现在每次点击都会旋转，希望你能重新考虑一下 ;) 当时我发布时时间很紧，只是一个快速的模型... - Trufa

@arttronics 现在我们说的就是这个啦，哈哈，谢谢，我必须承认那次我有点懒！ - Trufa