*

jqueryを使って画像を回転させる。jQueryRotateを使用

公開日: : css3, html5, jquery

今回は、画像を回転させるという事をやってみました。

調べてみたところ、jqueryを使って簡単に画像を回転させることができましたので、書きます。

まずは、デモを見てください。
デモ01

以下にソースを記載します。
今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
custom.js
jQueryRotate.js

以上の2つを使用します。

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>jqueryを使って画像を回転させる。jQueryRotateを使用</title>
<meta charset="UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="wrap">

    <div class="section" id="s01">
      30°傾けてみる
      <img src="images/reia.jpg" title="レイア">
    </div>

    <div class="section" id="s02">
      回し続けてみる
      <img src="images/reia.jpg" title="レイア">
    </div>

    <div class="section" id="s03">
      回して止めてを繰り返してみる
      <img src="images/reia.jpg" title="レイア">
    </div>

    <div class="section" id="s04">
      クリックして回す
      <img src="images/reia.jpg" title="レイア">
    </div>

    <div class="section" id="s05">
      マウスオーバーで回す
      <img src="images/reia.jpg" title="レイア">
    </div>

  </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="js/jQueryRotate.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>

次に、スタイルシートです。
index.css

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
}


#wrap {
	width: 1200px;
	margin: 0 auto;
}

.section {
	float: left;
	width: 600px;
	margin-top: 50px;
}

このcssは、デザインのみです。
画像の回転には関係ありません。

最後にjsファイルです。
custom.js

$(function(){
	//30°傾けてみる。
	$("#s01 img").rotate({angle:30});
	
	//回し続けてみる
	var angle = 0;
	setInterval(function(){
				angle+=3;
			 $("#s02 img").rotate(angle);
	},10);//
	
	//回して止めてを繰り返してみる
	var s03 = function (){
		 $("#s03 img").rotate({
				angle: 0, 
				animateTo: 360, 
				callback: s03
		 });
	}
	s03();
	
	//クリックして回す
	$("#s04 img").rotate({ 
		bind: 
			{ 
				click: function(){
					$(this).rotate({
						angle: 0,
						animateTo: 360,
						easing: $.easing.easeInOutExpo
					})
				}
			} 
	});
	
	//マウスオーバーで回す
	$("#s05 img").rotate({ 
	bind: 
		{ 
			mouseover : function() { 
				$(this).rotate({
					animateTo: 360
				})
			},
			mouseout : function() { 
				$(this).rotate({
					animateTo: 0
				})
			}
		} 	 
	});
	
});

※jQueryRotate.jsは、設置するだけで大丈夫です。編集の必要はありません。

以上で完成です。

今回参考にした、サイトがありますのでこちらも参考にしてみてください。
いろんな画像をクルックルクルックル回すイケイケjQueryプラグイン 「jQueryRotate」|わざログ| うずまきブログ| 名古屋のホームページ制作/印刷物デザイン 株式会社うずまきデザイン

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード

——————————————————————-
補足

今回は、色々な種類の回転方法を記載いたしましたが、
実際使用するときは、どれか1つを選んで使用します。
使用する際は、必要なIDだけ残してあとは、消してもOKです。(そのままにしても大丈夫です。)

この他に、違うバリエーションを加えるとまた違ったように見れるのではないでしょうか?
例えば、回転を終わったら、opacityで消すとか。
回転だけを使用するのではなく、回転は1つのバリエーションとして使用してみてはいかがでしょうか?
是非色々試してみてください。


関連記事

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑