コンサルのこと

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

2018/06/21
 
この記事を書いている人 - WRITER -

画像を回転させる方法はいくつかありますが、今回は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°回転するようになります。

この記事を書いている人 - WRITER -

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© コンサル , 2016 All Rights Reserved.