ポンクソフト

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

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

お名前:


ataru
もぐらたたきに絵を入れるとしたら、どこを変えたらいいのですか?
2016/09/06 14:20



2016/09/04 21:30



2016/08/30 19:27

ページング作成中
シンプルだけど結構応用が効く!
2016/07/25 18:26

良く理解しましょう
$(function() {
$('input').click(function() {
if ($(this).val() == 3) alert('正解!');
else alert('はずれ!');
});
});

valの値が2番なら正解を表示と言う意味なので、3番目を正解にするなら

val() == 3)書き換えればいいです。

inputのところは関係ないです。
2016/03/07 15:52

教えてください
クイズゲームの作り方で、2問目、3問目を作っても絶対に
2番が正解になりますよね?

input要素を読み込んでいるので、全て同じ動作になると思うんですが、他の番号を正解にしたい場合どうしたら良いでしょうか?

また、inputにid行ってみましたが、うまく反応しませんでした。
2016/03/07 14:13

まほ
わかりやすく説明していただきありがとうございます!
ところで、
$.each(items, function(i, item) {
make().css(item.css).html(item.html);
});
の部分だけ今ひとつ理解ができなかったのですが
localStorage.stickyに値が入っているときに
①itemsという配列に JSON形式の文字列をjsのオブジェクトとして返し
②それぞれのitemsの要素に対してcss、htmlの要素の中身を入れている

という認識で良いでしょうか?

function(i,item)のところにiが入っていますが、これはどこに影響を与えているのでしょうか?

長々とすみませんがご回答いただければ嬉しいです!
2016/02/17 21:03

ぴよよ
↓ 目次8からHTMLのheadの部分の記述が・・・スミマセン
2016/02/06 01:34

ぴよよ
これまでスムーズにできたのですが、今回わからないです><;
2016/02/06 01:31

UT
わかりやすいですね!感謝します。
2016/01/26 10:02

残りを読む »