ポンクソフト

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

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

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

画像の拡大縮小

前回のように背景画像を移動する手法では画像の拡大縮小ができないのですが、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 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:



あああああ
2017/01/20 17:43

カワカワ
ああああああああ
2017/01/16 08:48

fsfさ
dふぁfだs
2017/01/05 19:56

ああ
あああ
2016/11/09 18:25

test
サンプル
2016/11/08 16:42

セレクタの指定方法を返る
HTML部分
~~~~
<div>問題1</div>
<p>
<input type="radio" name="food" value="1">そば
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
</p>

<div>問題2</div>
<p>
<input type="radio" name="food01" value="1">いか
<input type="radio" name="food01" value="2">たこ
<input type="radio" name="food01" value="3">えび
<input type="radio" name="food01" value="4">えび
</p>
2016/11/08 14:31

セレクタの指定方法を返る
>教えてくださいさん
セレクタの指定方法をinputからnameに変える方法はいかがでしょうか。

//問題1
$(function() {
$("*[name=food]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});

//問題2
$(function() {
$("*[name=food01]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});
2016/11/08 14:31



2016/10/31 11:32


あいうえおテスト
2016/10/25 21:43

ああああ
いいいいいい
2016/10/20 11:05

残りを読む »