*

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

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

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

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

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

Message

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

PAGE TOP ↑