画像を自由自在に回転させることのできるjQueryプラグインjQueryRotate

はじめに

Webページに貼付けた画像を少しだけ角度を変えて表示させたい。そんなときは、jQueryRotateというjQueryプラグインを使うと良いです。
jQueryRotateは指定した画像を自由自在に回転させて表示させることができます。rotateは回転させるという意味で、名詞形のローテーションは良く聞く単語なのでイメージがつかみやすいと思います。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

posted with amazlet at 14.01.23

西畑一馬
アスキー・メディアワークス
売り上げランキング: 11,374

Amazon.co.jpで詳細を見る

jQueryRotateのダウンロード

以下のサイトからダウンロードすることができます。

jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting

jQueryRotateの使い方

最初に、jQueryをインクルードして、そのあとにjQueryRotate.2.1.jsをインクルードします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.1.js"></script>

画像を回転させるところのコードは以下のような感じで書きます。rotateメソッドの引数として、角度を指定します。

<script>
$(document).ready(function(){
  // hogeというIDを指定した画像を90度回転させる
  $('#hoge').rotate(90);
});
</script>

サンプルコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryRotateサンプルページ</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.1.js"></script>
<script>
$(document).ready(function(){
  // 画像を90度回転させる
  $('#hoge').rotate(90);
});
</script>

</head>
<body>
<h1>jQueryRotateサンプルページ</h1>
<img src="iphone.jpg" id='hoge'>
</body>
</html>