画像に角度や回転を加える/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>mRotate</title>
  <script src="js/mootools.1.2.1.js" type="text/javascript"></script>  
  <script src="js/mRotate.js" type="text/javascript"></script>
	<!--[if IE]>
  <script src="js/excanvas.js" type="text/javascript"></script>
  <![endif]-->
  <script type="text/javascript">
  document.addEvent('domready', function () {
    $('image').rotate(-90);
    $('image2').rotate(30);
    var rot = $('image3').rotate({maxAngle:180, minAngle:-180,
  			bind:
  				[
  					{"mouseenter":function(){rot.rotateAnimation(180);}},
  					{"mouseleave":function(){rot.rotateAnimation(-180);}}
  				]
  	});     
  });  
  </script>
  <style type="text/css">
    body {
      background-color:#000;
      color:#000;
      font-family:"Trebuchet MS", Arial, sans-serif;
      font-size:14px;
    }
    .div {
      float:left;
      text-align:center;
      width:50px;
    }
  </style>
  </head>
  
  <body>
  <div style="width:665px;">  
    <div class="div">
      <img id="image3" src="image3.png" alt="" />
    </div>
    <div class="div">
      <img id="image" src="image1.jpg" alt="" />
    </div>
    
    <div class="div">
    <img id="image2" src="image2.jpg" alt="" />
    </div>
  </div>

  </body>
</html>

	mRotate

画像を角度をつけて表示したり、マウスアクションで回転させたりできるスクリプト。
mootoolsライブラリを使用する。
使いどころがポイント。
サンプルではあえて重ねてみたが、こういった使い方は無難なのかもしれない。

設定

ダウンロード

サイトから、mRotateをダウンロード。
スクリプトは3つある。

<head>～</head>の設定

基本的には、mootoolsとmRotateを読み込ませ、IE対策としてexcanvasも設定する。
それから、画像の角度などを設定する。

imageは後で画像に設定するid、rotateの数値は角度を表す。
angleは削除しても動いた。
角度をつけて表示するときは、上記の設定で事足りる。
マウスアクションで回転させるには、image3の設定を行う。 maxAngleは最大角度、minAngleは最小角度。
mouseenterでマウスオーバーしたときに180°まで回転し、
mouseleaveでマウスアウトしたときに-180°まで回転させる設定。