JavaScript

jQueryRotate.jsを使って画像を回転させるアニメーション演出を表示する方法

  /

jQueryRotate.jsを使って画像を回転させるアニメーション演出を表示する方法をご紹介します。
（ブラウザの種類やバージョンによってもしかすると動かない可能性もありますが、探した中ではこれが一番多くのブラウザに対応していた様に思います）

Contents
  1. jQueryRotate.jsを使って画像を回転させるアニメーション演出を表示するJavaScriptの記述
  2. jQueryRotate.jsを使って画像を回転させるアニメーション演出を表示するHTML記述
  3. jQueryRotate：画像を回転させるjsデモページ

jQueryRotate.jsを使って画像を回転させるアニメーション演出を表示するJavaScriptの記述

※jquery-1.3.js、jQueryRotate.jsファイルを読み込みます。回転させたい画像エリアと角度を$().rotate()を使って設定します。setInterval()で繰り返します。

<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
	var r = 5;	//回転角度
	setInterval(function(){
	$("#idLogo").rotate(r);
		r = r + 0.1;
	}, 20);

});
-->
</script>

jQueryRotate.jsを使って画像を回転させるアニメーション演出を表示するHTML記述

※回転させる画像（id=”idLogo”）を用意します。

<h1 id="site-title" style="text-align:center; padding-top:50px; font-size:16px;">
<img id="idLogo" src="logo.jpg" alt="回転用画像イメージ" />
</h1>

jQueryRotate：画像を回転させるjsデモページ

jQueryRotate：画像を回転させるjsデモ

ソース元：jqueryrotate


　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

jQueryRotate.js 画像回転
RELATED POST