*

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

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

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

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

本日からblogを書きます。

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

記事を読む

no image

htmlの書き方について。

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑