画像を回転させる「mRotate.js」のMooTools版を試してみた

WEBマーケティングブログ » 便利なWEBツール・サービス » Ajax » 画像を回転させる「mRotate.js」のMooTools版を試してみた

jQuery版があれば十分なのですがｗ MooTools版も出たみたいだよということでご紹介。

Rotation of -25
Rotation with angle = 65°
マウスオーバーでグルグル
使用しているJS: <script src="js/mootools.1.2.1.js" type="text/javascript"></script> <script src="js/mRotate.js" type="text/javascript"></script>  <script type="text/javascript"> document.addEvent('domready', function () { $('image').rotate(-25); $('image2').rotate({angle:65}); var rot = $('image3').rotate({maxAngle:180, minAngle:-180, bind: [ {"mouseenter":function(){rot.rotateAnimation(180);}}, {"mouseleave":function(){rot.rotateAnimation(-180);}} ] }); }); </script>; ↑これをHead間に入れています。'image' 'image2' などのところで、回転量を調節できます。
使用しているHtml: <img id="image" src="image.jpg" alt="" /> <img id="image2" src="image.jpg" alt="" /> <img id="image3" src="image.jpg" alt="" />; ↑JSで各IDの回転度合いを指定して、画像にはIDをそれぞれ振るだけです。

興味のある方は、mRotateからプラグインセットをダウンロードしてください。

ごくたまにだとは思いますが、画像を回転させたい時ってありますよねｗブログジャンルによっては、雑誌などと同様に斜めにしたいこともあるはず。（私の場合はスノーボードですねｗ）ぜひ覚えておきたい一品ですね。