2013-10-03

javascript：パノラマ写真をドラッグでスクロール

サンプル

◆html

16行目：width, height で画像を表示するサイズを定義する。
17行目：width, height で画像のサイズを定義する。urlで画像ファイルを定義する。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <title>Panorama</title>
  5. <meta http-equiv="imagetoolbar" content="no" />
  6. <link rel="stylesheet" href="panorama.css">
  7. <script src="panorama.js"></script>
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div align="center">
  13.  
  14. <h1>九十九谷</h1>
  15.  
  16. <div id="panorama_wrapper" style="width:1000px; height:400px;">
  17.  <div id="panorama_image" style="width:2261px; height:400px; background-image: url('001.jpg')"></div>
  18. </div>
  19.  
  20. </div>
  21.  
  22. </body>
  23. </html>

◆javascript(panorama.js)

尚、360°パノラマ写真を連続してドラッグできるようにするには、20行目の代わりに21行目を使用し、46,47行目を使用する。

  1. var dx = 0; // マウスダウンした場所の画像の座標
  2. var xcache = 0; // 画像の左端のスクリーンの左端に対する座標
  3. var dragObj; // ドラッグの状態を表す。　null→ドラッグしていない状況
  4. var maxLeft; // もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0
  5. var panorama_width; //画像の幅
  6.  
  7. window.onload = function () {
  8.  setPicture();
  9. }
  10.  
  11. function setPicture(){
  12.  
  13.  dragObj = null;
  14.  
  15.  document.getElementById('panorama_wrapper').onmousemove = mouseMove;
  16.  document.onmouseup = mouseUp;
  17.  document.getElementById('panorama_wrapper').onmousedown = mouseDown;
  18.  
  19.  panorama_width = document.getElementById('panorama_image').clientWidth;
  20.  maxLeft = document.getElementById('panorama_wrapper').clientWidth - panorama_width;
  21. // maxLeft = document.getElementById('panorama_wrapper').clientWidth - panorama_width*2; // 360°パノラマの場合、この行を使用する。
  22.    // もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0
  23.  
  24.  var img = document.getElementById('panorama_image');
  25.  img.style.width = panorama_width*2+"px";
  26.  
  27.  xcache = 0;
  28.  
  29. }
  30.  
  31. function mouseDown(e) {
  32.  
  33.  if(window.event) e = window.event;
  34.  dragObj = this;
  35.  var x = e.clientX ;  // マウスダウンした場所のスクリーンの座標
  36.  dx = x - xcache;  // マウスダウンした場所の画像の座標
  37. }
  38.  
  39. function mouseMove(e) {
  40.  
  41.  if(!dragObj)return;
  42.  if(window.event) e = window.event;
  43.  var x = e.clientX ;
  44.  var xcache_tmp = x - dx; // ドラッグによる移動量
  45.  
  46. // if ( xcache_tmp >0 ) {xcache_tmp -= panorama_width;}  // 360°パノラマの場合、この行を使用する。
  47. // if ( xcache_tmp <maxLeft ) {xcache_tmp += panorama_width;} // 360°パノラマの場合、この行を使用する。
  48.  
  49.  if(maxLeft < xcache_tmp && 0 >= xcache_tmp){ // 画像が可動の範囲であれば実行
  50.   document.getElementById('panorama_image').style.left = xcache_tmp + "px";
  51.   xcache = xcache_tmp; // 画像の左端のスクリーンの左端に対する座標
  52.  }
  53.  
  54.  if(window.event) window.event.returnValue = false;
  55.  else return false;
  56.  
  57. }
  58.  
  59. function mouseUp (e) {
  60.  dragObj = null;
  61. }


◆css(panorama.css)

  1. div#panorama_wrapper {
  2.  overflow: hidden;
  3.  position: relative;
  4. }
  5.  
  6. div#panorama_image {
  7.  position: absolute;
  8.  cursor : pointer;
  9. }

◆その他

パノラマ写真を作るにはImage Composite Editorが便利です。

参考にしたページ

Javascriptでパノラマ写真をドラッグ
投稿者 時刻:
ラベル: