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

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

■画像を回転「JQueryRotate」

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

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

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

HPでファイルをダウンロード
「jQueryRotate.js」を任意の位置にアップロード
<head>内に以下のようなコードを記述（場所、ファイル名は個別に変更）

jsファイルの読込の記述
Default

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

1
2
動かしたい画像にidを付ける

動かしたい画像にidを付ける
Default

<img src="hoge.png" id="img">

1

付けたい動きを考えて<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})
    }
  }
});

});

$(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』へのコメント

名前:makoto 投稿日：2017/04/14(金) 21:57:05 ID：5bbfd7c79 返信

テスト