「JQueryRotate」画像を回転させたりするjquery

何か動きが欲しい、という時に役に立つ。
比較的導入が簡単だと思うので、ワンポイント動きを付けるときなどに助かります。

■画像を回転「JQueryRotate」

回転以外にもできることはあります。公式HPの方でいくつか動作が確認できます。

jQueryRotate(HP) : http://jqueryrotate.com/

■実装方法（jqueryは1.8.3でも動作しました）

HPでファイルをダウンロード
「jQueryRotate.js」を任意の位置にアップロード

<head>内に以下のようなコードを記述（場所、ファイル名は個別に変更）

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>

動かしたい画像にidを付ける
```
<img src="hoge.png" id="img">
```

付けたい動きを考えて<head>に記述する（HPの例）

$(function(){

$("#img").rotate(45);　/* 45度傾ける */

$("#img").rotate({　/* マウスオーバーしている間だけ180度まで回転する */
  bind:
  {
    mouseover : function() {
    $(this).rotate({animateTo:180})
  },
  mouseout : function() {
    $(this).rotate({animateTo:0})
    }
  }

});

var angle = 0;　/* 一定の速度（ゆっくり）で回転し続ける */
  setInterval(function(){
    angle+=3;
  $("#img").rotate(angle);
  },50);

var rotation = function (){　/* 早い回転を繰り返す */
  $("#img").rotate({
    angle:0,
    animateTo:360,
    callback: rotation
  });
}
rotation();

var rotation = function (){　/* 一定の速度（早く）で回転をし続ける */
  $("#img").rotate({
    angle:0,
    animateTo:360,
    callback: rotation,
    easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
      return c*(t/d)+b;
    }
  });
}
rotation();

$("#img").rotate({　/* クリックで180度回転 */
  bind:
  {
    click: function(){
      $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
    }
  }
});

var value = 0　/* クリックで90度づつ回転する */
$("#img").rotate({
  bind:
  {
    click: function(){
      value +=90;
      $(this).rotate({ animateTo:value})
    }
  }
});

});

5の記述はHPの解説なども参考にして下さい。
基本的な動作しかわかっていないので、5つのパラメータのところは×。

何か質問、誤情報、誤字などがあればコメントでお願いします。

■画像を回転「JQueryRotate」

■実装方法（jqueryは1.8.3でも動作しました）

最近の投稿

コメント