画像をクルクル回転させたり、傾けたりできるJqueryプラグインjqueryrotateの設置

【この記事を読むのに必要な時間は約 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プラグインのサイトに用意されているサンプルページを是非ご覧いただきたい。
以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。

コメント

  1. 松村正 より:

    わかりやすい情報公開ありがとうございます。
    無事に動作をしたのですが、複数画像を動かす方法などないでしょうか?

    画像ファイルに、id=”rotatelogo” をつけたのですが、1番目にタグをつけた画像しかまわりませんでした。

    方法がありましたら教えて下さいm(_ _)m

  2. 松村正 より:

    IDを複数指定することにより解決をしました。
    ありがとうございました!

  3. jump-up より:

    はじめまして^^このところPHPの勉強に夢中でブログ更新サボってあまり見てませんでした。
    ごめんなさい解決してよかったです。また何かあったらなんでもどうぞ!