2016/09/20

画像を回転させるjQuery「jQueryRotate」の使い方

画像を回転させる方法はいくつかありますが、今回はjQueryを使った方法の紹介をします。

プラグインのダウンロード

まずはプラグインをダウンロードしましょう。
jQuery
jQueryRotateのダウンロード

以上2つの用意ができたらheader内に読み込みます。

<script type=“text/javascript” src=“files/js/jquery.min.js”></script>
<script type=“text/javascript” src=“files/js/jQueryRotate.js”></script>

画像を回す為のscriptを記述

$(function(){
	$("figure img").rotate({ 
	bind: 
		{ 
			mouseover : function() { 
				$(this).rotate({
					animateTo: 360
				})
			},
			mouseout : function() { 
				$(this).rotate({
					animateTo: 0
				})
			}
		} 	 
	});
	
});

動かしたい画像を<figure></figure>で囲ってあげる。

 

これで<figure>内にある画像が360°回転するようになります。