第21回 iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する – jQuery入門
2009 年 10 月 25 日 投稿者: naga3
iPhoneのようにシリーズ、しつこすぎですね。前回のように背景画像を移動する手法ではiPhoneのような拡大縮小ができないのですが、imgタグで画像を表示する方法ならば実現可能ではないかと考えてみました。具体的には、positionプロパティにabsoluteを指定してleftとtopで表示位置を変え、拡大縮小はwidth, heightプロパティをanimateすることで対応します。そのままでは拡大したときに画像があふれてしまうので、imgをdivタグで覆い、overflowプロパティをhiddenにすることによってあふれる部分を隠すわけです。
拡大縮小のデモ
画像の上でダブルクリックするとマウスの座標を中心に拡大縮小します。写真画像はフリー写真素材 Futta.NET様の素材をお借りしています。ソース
必要なら右クリックから保存してください。image_zoom.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function() {
var zoomin = true;
$('img').dblclick(function(e) {
if (zoomin) {
$(this).animate({width: 512, height: 384, left: 0, top: 0}, 500);
zoomin = false;
} else {
var x = (e.pageX - $(this).offset().left) * 2 - 256;
if (x < 0) x = 0;
if (x > 512) x = 512;
var y = (e.pageY - $(this).offset().top) * 2 - 192;
if (y < 0) y = 0;
if (y > 384) y = 384;
$(this).animate({width: 1024, height: 768, left: -x, top: -y}, 500);
zoomin = true;
}
});
});
</script>
<style type="text/css">
div {
width: 512px;
height: 384px;
overflow: hidden;
position: relative;
}
img {
position: absolute;
}
</style>
</head>
<body>
<div><img src="himawari.jpg" /></div>
</body>
</html>
プログラムの解説
var zoomin = true;
拡大時にtrueになるフラグです。
$(this).animate({width: 512, height: 384, left: 0, top: 0}, 500);
縮小時には、画像サイズを1/2、表示位置を左上の位置に500msでアニメートします。
var x = (e.pageX - $(this).offset().left) * 2 - 256;
拡大時には、まず画像の表示開始位置（左上）を求めます。offset()メソッドで要素のページ上の左上座標が返ります。pageXにはページ上のマウス座標が入るので、そこからoffset().leftを引くことにより、画像の左上からの相対X座標を求めることができます。さらに1/2に縮小されているので2を掛けたものが中心座標となります。それに256を引くことによって左上のX座標が求まるわけです。
if (x < 0) x = 0;
if (x > 512) x = 512;
左右にはみださないようにしている部分です。
var y = (e.pageY - $(this).offset().top) * 2 - 192;
if (y < 0) y = 0;
if (y > 384) y = 384;
Y座標も同じ方法で求めます。
$(this).animate({width: 1024, height: 768, left: -x, top: -y}, 500);
画像サイズを元の大きさ、表示位置を先ほど求めたx, y座標にし、500msでアニメートします。これによってマウスの地点を中心にした拡大が実現できます。