画像を回転させる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」』さんです。
ありがとうございます。
