jQueryを使った画像の回転

画像を回転させるjQueryです。簡単に画像を回転させる事が出来ます。
代表的な5パターン作成しました。

今回使用した「jquery.min.js:ver2.0.3」と「jQueryRotate.js:Ver2.3」です。

↓以下が実際のソースサンプルです。

▼JavaScript

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript">
$(function(){
	//mission1
	$("#Neko1 figure img").rotate({angle:45});
	
	//mission2
	var angle = 0;
	setInterval(function(){
				angle+=3;
			 $("#Neko2 figure img").rotate(angle);
	},40);
	
	//mission3
	var Neko3 = function (){
		 $("#Neko3 figure img").rotate({
				angle: 0, 
				animateTo: -360, 
				callback: Neko3
		 });
	}
	Neko3();
	
	//mission4
	$("#Neko4 figure img").rotate({ 
		bind: 
			{ 
				click: function(){
					$(this).rotate({
						angle: 0,
						animateTo: 360,
						easing: $.easing.easeInOutExpo
					})
				}
			} 
	});
	
	//mission5
	$("#Neko5 figure img").rotate({ 
	bind: 
		{ 
			mouseover : function() { 
				$(this).rotate({
					animateTo: 360
				})
			},
			mouseout : function() { 
				$(this).rotate({
					animateTo: 0
				})
			}
		} 	 
	});
	
});
</script>

▼CSS

<style type="text/css">
.cfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
.cfix {
    display: inline-table;
    min-height: 1%;
}
 
/* Hides from IE-mac */
* html .cfix {
    height: 1%;
}
.cfix {
    display: block;
}
/* End hide from IE-mac */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
}

h1,h2,h3 {
	line-height: 1.2;
}

#wrap {
	width: 960px;
	overflow: hidden;
	margin: 0 auto;
}
img{
	width:250px;
	height:250px;
}
#neko{
display:block;
margin-left:auto;
margin-right:auto;
}
#header {
	margin-bottom: 50px;
	border-bottom: 2px dotted #ccc;
}

#header h1 {
	padding: 50px 0;
	text-align: center;
	font-size: 60px;
	font-family: 'Gudea', sans-serif;
}

#header h1 span {
	display: inline-block;
	padding: 5px 3px;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background: #FF0;	
}

#wrap {
	width: 990px;
}

.Demonstration {
	float: left;
	width: 300px;
	padding-bottom: 40px;
	margin: 0 30px 40px 0;
	border-bottom: 2px dotted #c8c8c8;
}

.Demonstration h1 {
	text-align:center;
	margin-bottom: 40px;
	font-size: 36px;
	font-family: 'Gudea', sans-serif;
}

.Demonstration h1 span {
	display: inline-block;
	padding: 5px 3px;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background: #FF0;
}

.Demonstration figure {
	text-align: center;
}

.Demonstration#Neko4 figure img,.Demonstration#Neko5 figure img {
	cursor: pointer;
}

#footer #copyright {
	padding: 0 0 30px;
}

</style>

▼HTML

<div id="wrap">
  <div id="header">
    <h1>jQueryRotate.js<br /><span>猫を傾けてjQueryRotate.jsを完全マスターしよう編</span></h1>
	<img id="neko" src="images/neko.gif" alt="ねこ">
  </div>
  <div id="wrap" class="cfix">
    <div class="Demonstration" id="Neko1">
      <h1>Demonstration 1<Br /><span>猫を45°傾けてみる</span></h1>
      <figure><img src="images/neko.gif" title="みよ、ねこ傾く"></figure>
    </div>
    <div class="Demonstration" id="Neko2">
      <h1>Demonstration 2<Br /><span>猫を回し続けてみる</span></h1>
      <figure><img src="images/neko.gif" title="みよ、ねこ回る"></figure>
    </div>
    <div class="Demonstration" id="Neko3">
      <h1>Demonstration 3<Br /><span>猫を回して止めてを繰り返してみる</span></h1>
      <figure><img src="images/neko.gif" title="ねこ、遊ばれとるで"></figure>
    </div>
    <div class="Demonstration" id="Neko4">
      <h1>Demonstration 4<Br /><span>猫をクリックして回す</span></h1>
      <figure><img src="images/neko.gif" title="一回まわってにゃんや"></figure>
    </div>
    <div class="Demonstration" id="Neko5">
      <h1>Demonstration 5<Br /><span>猫をマウスオーバーで回す</span></h1>
      <figure><img src="images/neko.gif" title="もう一回まわってお手!"></figure>
    </div>
  </div>
</div>

今回、参考にさせていただいたのは、
いろんな画像をクルックルクルックル回すイケイケjQueryプラグイン 「jQueryRotate」』さんです。
ありがとうございます。

デモページは、こちら