iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する - jQuery入門

画像の拡大縮小

前回のように背景画像を移動する手法では画像の拡大縮小ができないのですが、imgタグで画像を表示する方法ならばanimateメソッドによって拡大縮小することができます。そのままでは拡大したときに画像があふれてしまうので、imgをdivタグで覆い、overflowプロパティをhiddenにすることによってあふれる部分を隠しています。

実行結果

画像の上でダブルクリックすると、そのマウスの座標を中心に拡大縮小します。写真画像はフリー写真素材Futta.NET様の素材をお借りしています。

別ページで開く

ソース


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<title>ダブルクリックで画像を拡大縮小</title>

<script>

$(function() {

  var DIV_W = 512;

  var DIV_H = 384;

  var IMG_W = 1024;

  var IMG_H = 768;

  var zoomin = true;

  $('div').css({width: DIV_W, height: DIV_H});

  $('img').dblclick(function(e) {

    if (zoomin) {

      $(this).animate({width: DIV_W, height: DIV_H, left: 0, top: 0}, 500);

      zoomin = false;

    } else {

      var x = (e.pageX - $(this).offset().left) * (IMG_W / DIV_W) - DIV_W / 2;

      if (x < 0) x = 0;

      if (x > IMG_W - DIV_W) x = IMG_W - DIV_W;

      var y = (e.pageY - $(this).offset().top) * (IMG_H / DIV_H) - DIV_H / 2;

      if (y < 0) y = 0;

      if (y > IMG_H - DIV_H) y = IMG_H - DIV_H;

      $(this).animate({width: IMG_W, height: IMG_H, left: -x, top: -y}, 500);

      zoomin = true;

    }

  });

});

</script>

<style>

div {

  overflow: hidden;

  position: relative;

}

img {

  position: absolute;

}

</style>

</head>

<body>

<div><img src="himawari.jpg"></div>

</body>

</html>

プログラムの解説


var DIV_W = 512;

var DIV_H = 384;

var IMG_W = 1024;

var IMG_H = 768;

DIV_W,DIV_Hは表示領域の幅と高さ、IMG_W,IMG_Hは画像の元の幅と高さです。


var zoomin = true;

拡大時にtrueになるフラグです。


$('div').css({width: DIV_W, height: DIV_H});

表示領域の幅と高さを設定します。


$(this).animate({width: DIV_W, height: DIV_H, left: 0, top: 0}, 500);

縮小時の処理です。画像サイズ表示領域のサイズまで縮小するアニメーションを、長さ500msで行います。


var x = (e.pageX - $(this).offset().left) * (IMG_W / DIV_W) - DIV_W / 2;

拡大時には、まず画像の表示開始位置（左上）を求めます。offset()メソッドで要素のページ上の左上座標が返ります。pageXにはページ上のマウス座標が入るので、そこからoffset().leftを引くことにより、画像の左上からの相対X座標を求めることができます。さらに縮小率を掛けて中心座標としています。そこから表示領域の半分を引くことによって左上のX座標が求まるわけです。


if (x < 0) x = 0;

if (x > IMG_W - DIV_W) x = IMG_W - DIV_W;

左右にはみださないようにしている部分です。


var y = (e.pageY - $(this).offset().top) * (IMG_H / DIV_H) - DIV_H / 2;

if (y < 0) y = 0;

if (y > IMG_H - DIV_H) y = IMG_H - DIV_H;

Y座標も同じ方法で求めます。


$(this).animate({width: IMG_W, height: IMG_H, left: -x, top: -y}, 500);

画像サイズを元の大きさ、表示位置を先ほど求めたx, y座標にし、500msでアニメーションします。これによってマウスの地点を中心にした拡大が実現できます。

前ページ　 jQuery入門 TOP　次ページ

ポンクソフト