ポンクソフト

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)

画像のスクロール

第18回の「iPhoneのようなフリックスクロールを実装してみる」がいろんな人に好評だったので、調子に乗って第2弾をお届けします。iPhoneは画面に入りきらない大きい画像をタッチしてスライドで動かすことができるのですが、そんなやつです。

実行結果

画像の上でマウスボタンを押してドラッグすることで表示領域を移動することができます。写真画像はフリー写真素材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 = 320;
  var DIV_H = 240;
  var IMG_W = 1024;
  var IMG_H = 768;
  var x = 0;
  var y = 0;
  $('#move').css({
    width: DIV_W,
    height: DIV_H,
    backgroundImage: 'url(himawari.jpg)'
  }).mousedown(function(e) {
    $(this).css('cursor', 'move');
    var bx = e.pageX;
    var by = e.pageY;
    $(document).on('mousemove.move', function(e) {
      x += bx - e.pageX;
      bx = e.pageX;
      if (x < 0) x = 0;
      if (x > IMG_W - DIV_W) x = IMG_W - DIV_W;
      y += by - e.pageY;
      by = e.pageY;
      if (y < 0) y = 0;
      if (y > IMG_H - DIV_H) y = IMG_H - DIV_H;
      $('#move').css('background-position', '-' + x + 'px -' + y + 'px');
      return false;
    }).one('mouseup', function() {
      $('#move').css('cursor', 'auto');
      $(document).off('mousemove.move');
    });
    return false;
  });
});
</script>
</head>
<body>
<div id="move"></div>
</body>
</html>

プログラムの解説

var DIV_W = 320;
var DIV_H = 240;
var IMG_W = 1024;
var IMG_H = 768;
DIV_W,DIV_Hは表示領域の幅と高さ、IMG_W,IMG_Hは画像の元の幅と高さです。
var x = 0;
var y = 0;
画像の左上から(x, y)の位置が実際に表示する左上座標となります。
$('#move').css({
    width: DIV_W,
    height: DIV_H,
    backgroundImage: 'url(himawari.jpg)'
画像の表示領域のCSSを設定しています。DIV_W,DIV_Hの値を使いたかったのでJavaScript内で設定します。
}).mousedown(function(e) {
画像の上でマウスが押されたときに以下全ての処理を行っています。
$(this).css('cursor', 'move');
まずカーソルの形を上下左右の矢印にします。
var bx = e.pageX;
var by = e.pageY;
bx, byはマウスが押されたときのページ上の座標を保持するための変数です。
$(document).on('mousemove.move', function(e) {
ドキュメント全体に対してイベントを設定しています。その際、マウスが離されたときにイベントを削除したいので「move」という名前空間を付加しています。
x += bx - e.pageX;
bx = e.pageX;
if (x < 0) x = 0;
if (x > IMG_W - DIV_W) x = IMG_W - DIV_W;
y += by - e.pageY;
by = e.pageY;
if (y < 0) y = 0;
if (y > IMG_H - DIV_H) y = IMG_H - DIV_H;
表示開始する左上の位置(x, y)を、マウスの移動量から算出している部分です。画像の外へはみ出さないように制御もしています。
$('#move').css('background-position', '-' + x + 'px -' + y + 'px');
背景として表示された画像の表示位置をCSSで決めています。マイナスを指定すると画像の途中から表示開始することができます。
}).one('mouseup', function() {
こちらはマウスボタンが離されたときのイベントを設定しています。oneメソッドを使うとイベントを一度だけ実行することができます。
$('#move').css('cursor', 'auto');
まずマウスを元の形に戻し、
$(document).off('mousemove.move');
名前空間を参照してマウスが移動したときのイベントを削除しています。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0