*

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つのバリエーションとして使用してみてはいかがでしょうか?
是非色々試してみてください。


関連記事

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

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

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

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

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

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

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑