iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる - jQuery入門

画像のスクロール

第18回の「iPhoneのようなフリックスクロールを実装してみる」がいろんな人に好評だったので、調子に乗って第２弾をお届けします。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　次ページ

ポンクソフト