第20回 iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる – jQuery入門
2009 年 10 月 24 日 投稿者: naga3
第18回の「iPhoneのようなフリックスクロールを実装してみる」がいろんな人に好評だったので、調子に乗って第２弾をお届けします。iPhoneは画面に入りきらない大きい画像をタッチしてスライドで動かすことができるのですが、そんなやつです。
画像移動のデモ
画像の上でマウスボタンを押してドラッグすると表示領域を移動することができます。写真画像はフリー写真素材 Futta.NET様の素材をお借りしています。ソース
必要なら右クリックから保存してください。image_move.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 x = 0;
var y = 0;
$('#move').mousedown(function(e) {
$(this).css('cursor', 'move');
var bx = e.pageX;
var by = e.pageY;
$().bind('mousemove.move', function(e) {
x += bx - e.pageX;
bx = e.pageX;
if (x < 0) x = 0;
if (x > 512) x = 512;
y += by - e.pageY;
by = e.pageY;
if (y < 0) y = 0;
if (y > 384) y = 384;
$('#move').css('backgroundPosition', '-' + x + 'px -' + y + 'px');
return false;
}).one('mouseup', function() {
$('#move').css('cursor', 'auto');
$().unbind('mousemove.move');
});
return false;
});
});
</script>
<style type="text/css">
#move {
width: 512px;
height: 384px;
background-image: url('himawari.jpg');
}
</style>
</head>
<body>
<div id="move"></div>
</body>
</html>
プログラムの解説
var x = 0;
var y = 0;
画像の左上から(x, y)の位置が実際に表示する左上座標となります。
$('#move').mousedown(function(e) {
画像の上でマウスが押されたときに以下全ての処理を行っています。
$(this).css('cursor', 'move');
まずカーソルの形を上下左右の矢印にします。
var bx = e.pageX;
var by = e.pageY;
bx, byはマウスが押されたときのページ上の座標を保持するための変数です。
$().bind('mousemove.move', function(e) {
ドキュメント（$()は$(document)の略）全体に対してイベントを設定しています。その際、マウスが離されたときにイベントを削除したいので「move」という名前空間を付けています。
x += bx - e.pageX;
bx = e.pageX;
if (x < 0) x = 0;
if (x > 512) x = 512;
y += by - e.pageY;
by = e.pageY;
if (y < 0) y = 0;
if (y > 384) y = 384;
画像上の表示開始する左上の位置(x, y)を、マウスの移動量から算出している部分です。画像の外へはみ出さないように制御もしています。
$('#move').css('backgroundPosition', '-' + x + 'px -' + y + 'px');
背景として表示された画像の表示位置をCSSで決めています。マイナスを指定すると画像の途中から表示開始することができます。
}).one('mouseup', function() {
こちらはマウスボタンが離されたときのイベントを設定しています。oneメソッドを使うとイベントを一度だけ実行することができます。
$('#move').css('cursor', 'auto');
まずマウスを元の形に戻し、
$().unbind('mousemove.move');
名前空間を参照してマウスが移動したときのイベントを削除しています。