jQueryRotateを使って画像を回転させる

jQueryRotateは、画像を回転させるjQueryのプラグイン。ここからダウンロードして使う。

• 画像を回転させる

// JavaScript
$("#img").rotate(45); // 45度回転させる(負の数も指定可能)
$("#img").rotate({angle:45}); // 別の記述法(パラメータ方式)

• 画像をアニメーション付で回転させる

// JavaScript
// 45度までアニメーション付で回転(所要はデフォルトの1000ミリ秒)
$("#img").rotate({animateTo:45}); 
// 0度から45度までアニメーション付で回転(所要6000ミリ秒)
$("#img").rotate({
   duration:6000,
   angle: 0, 
   animateTo:45
});

• アニメーションに効果を加える

// JavaScript
$(this).rotate({
   angle: 0, 
   animateTo:180,
   easing: $.easing.easeInOutElastic
});

この例では$.easing.easeInOutElasticの効果を指定している。このプラグインの前にeasing pluginの読込が必要。

• イベントとの紐付け

bindオプションを利用する。例えばクリックされたら回転するようにするには、以下のようにする。

// JavaScript
$("#img").rotate({bind:{
   click: function(){
      $(this).rotate({
         angle: 0, 
         animateTo:180
      })
   }
 }
});