【この記事を読むのに必要な時間は約 4 分です。】
マウス（カーソル）が乗っかるとクルっと回転したりするアイコンを見かける。自分のサイトにも設置したいなあということで、早速、Jqueryプラグインを探してみた。見つけたのが、「jqueryrotate」というJqueryプラグイン。
通常時に画像を傾けたり画像を回転させたり、また、マウスオーバー時やクリック時に画像を回転させたりできる。早速紹介する。
目次
jqueryrotateのサーバーへの設置
「jqueryrotate」プラグインのホームページの左側にある「Downloads」の中の圧縮版プラグイン「jQueryRotateCompressed.js」をダウンロードする。
ダウンロードした「jQueryRotateCompressed.js」をサーバーへアップロードする。
ライブドアブログでのアップロード方法は、当ブログのサイト作成＞ライブドアブログの記事の中に詳細があるので参考にして欲しい。
jqueryrotateプラグインの利用方法
ヘッダー部分への記載
Jquery本体と「jqueryrotate」プラグインの呼び出し
ヘッダー部分（<head>～</head>の間）に、いつものように、Jquery本体と「jqueryrotate」プラグインを呼び出す設定をする。
Jquery本体はGoogle AJX APIのホスティングを利用し、「jqueryrotate」はアップロード先から呼び出す。以下のように記載する。
<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->
<!-- rotate.js -->
<script type="text/javascript" src="http://2chan-matome.publog.jp/rotate/jQueryRotateCompressed.js"></script>
<!-- /rotate.js -->既にJquery本体を設置している場合は、「jqueryrotate」だけ設置すること。
付与したい効果の記載
付与できる効果は、冒頭で説明のとおり色々あるが、今回は画像にマウスオーバーする（カーソルが乗っかる）と画像が360度回転して、離れると元に戻る効果を与えている。
上記のヘッダー部分の呼び出しに続けて以下のように記載する。
なお、効果を付与する画像にIDを指定してやる必要があり、ここでは、「#rotatelogo 」を指定している。
<!-- rotate.js setting -->
//マウスオーバー時に360度回転、離れて戻る
<script type="text/javascript">
$(function(){
$("#rotatelogo").rotate({
bind:
{
mouseover : function() {
$(this).rotate({
animateTo: 360
})
},
mouseout : function() {
$(this).rotate({
animateTo: 0
})
}
}
});
});
</script>
<!-- /rotate.js setting -->ボディ内部の画像への記載
効果を与えたい画像（imgタグ）に対して上記で設定したidを指定する。
//例）
<img id="rotatelogo" src="画像のURL" />デモ
実際に表示してみるとこんな感じ。
その他の効果
その他にも、画像を傾けたり、回転させ続けたり、クリック時に効果を付与したりと色々あるので、jqueryrotateプラグインのサイトに用意されているサンプルページを是非ご覧いただきたい。
以上
コメント
わかりやすい情報公開ありがとうございます。
無事に動作をしたのですが、複数画像を動かす方法などないでしょうか？
画像ファイルに、id=”rotatelogo” をつけたのですが、1番目にタグをつけた画像しかまわりませんでした。
方法がありましたら教えて下さいm(_ _)m
IDを複数指定することにより解決をしました。
ありがとうございました！
はじめまして＾＾このところPHPの勉強に夢中でブログ更新サボってあまり見てませんでした。解決してよかったです。また何かあったらなんでもどうぞ！
ごめんなさい