skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

JavaScriptで画像を回転させる「Wilq32.RotateImage」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ただ、写真をずらっと掲載しているだけでは、つまらないという方は多いと思います。
jQueryのライブラリ「Wilq32.RotateImage」では、簡単・手軽に画像を傾けることが可能です。

使用方法
Wilq32.RotateImageからjQueryRotate.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="/test/js/jquery-1.3.js"></script>
<script type="text/javascript" src="/test/js/jQueryRotate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').rotate({angle:N}); //Nに傾けたい角度を入れます。＊マイナスも入ります。
});
</script>
あとは上記で指定したid名を回転させたい画像につけます。
<img id="id名" src="画像パス" />
また、マウスオーバーなどで回転させるなど、アニメーションもつけることが出来ます。
JavaScriptで画像を回転させる「Wilq32.RotateImage」サンプル

記事作成：2009年01月29日

前の記事：JavaScriptで綺麗な時計を作る「epiclock」
次の記事：リンク先の画像をプレビューするJavaScript「imgpreview」