Làm thế nào để xoay hình ảnh tại chỗ với jQuery?

Question

Tôi đang cố gắng tạo một hình ảnh xoay tại chỗ với mỗi lần nhấp (hình ảnh là một núm TV cũ). Tôi không thể làm cho nó hoạt động bất chấp những nỗ lực tốt nhất của tôi.

Mã này là dưới đây:

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

});

Answer 1

tôi cung cấp một jsFiddle gây div để xoay sau mỗi lần click chuột.

Về cơ bản, đây là từ Ví dụ 5 của plugin jqueryrotate.js.

Tham chiếu: jsFiddle

Answer 2

Có một bản vá jQuery, cho phép bạn làm điều gì đó như thế này: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

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

Hoặc plugin này: http://code.google.com/p/jqueryrotate/ cho phép công cụ như:

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

(http://jsfiddle.net/mFY22/3/)

Answer 3

Dưới đây là ví dụ nhanh sử dụng plugin jquery có tên là jqueryrotate

See the jsfiddle here.