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サンプルページ一覧

skuare.net