*

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

公開日: : css3, html5, jquery

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

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

前回の回転と今回の拡大縮小を組み合わせれば、またひとつ変わった動きが作れます。
今度、時間があるときにでも組み合わせたものを作ってみたいと思います。

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

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

scriptは、
custom.js
以上の1つを使用します。

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

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

<body>

  <div id="wrap">

<p><img src="images/reia.jpg" alt="reia" id="sample000"></p>
<p><input type="button" value="拡大・縮小させる" id="sample000a"></p>

<p><img src="images/reia.jpg" alt="reia" class="sample111"></p>
<p><input type="button" value="びよんびよんと拡大・縮小させる" id="sample111a"></p>

  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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;
}

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

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

$(function(){

	$('#sample000a').on('click', function(){
		$('#sample000').animate({paddingRight:1},{
			duration:1000,
			step:function(now,fx){$(this).css({transform:'scale('+now+')'});},
			complete:function(){$('#sample000').css('paddingRight',0);}
		})
	})

	$('#sample111a').on('click', function(){
		$('.sample111').animate({paddingRight:1},{
			duration:2000,
			step:function(now,fx){$(this).css({transform:'scale('+(1 + Math.sin(now * 4 * Math.PI)/2)+')'});},
			complete:function(){$('.sample111').css('paddingRight',0);}
		})
	})


});

以上で完成です。

今回参考にした、サイトがありますのでこちらも参考にしてみてください。
【jQuery】拡大・縮小のアニメーションをする例 at softelメモ

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

——————————————————————-
補足
custom.jsでは、
“sample000a”の部分は、拡大縮小の部分。
“sample111a”の部分は、びよんびよんと拡大・縮小させる部分。

また、”duration”の数字の部分を変更すれば、アクションが完了する時間を変更できます。
また、クリックせずに拡大縮小する際は、クリックの部分を消してあげれば、動きます。

是非参考にしてみてください。


関連記事

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

本日からblogを書きます。

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

記事を読む

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

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

記事を読む

Message

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

PAGE TOP ↑