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