◆html
16行目：width, height で画像を表示するサイズを定義する。17行目：width, height で画像のサイズを定義する。urlで画像ファイルを定義する。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Panorama</title>
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="panorama.css">
<script src="panorama.js"></script>
</head>
<body>
<div align="center">
<h1>九十九谷</h1>
<div id="panorama_wrapper" style="width:1000px; height:400px;">
<div id="panorama_image" style="width:2261px; height:400px; background-image: url('001.jpg')"></div>
</div>
</div>
</body>
</html>
◆javascript(panorama.js)
尚、360°パノラマ写真を連続してドラッグできるようにするには、20行目の代わりに21行目を使用し、46,47行目を使用する。
var dx = 0; // マウスダウンした場所の画像の座標
var xcache = 0; // 画像の左端のスクリーンの左端に対する座標
var dragObj; // ドラッグの状態を表す。 null→ドラッグしていない状況
var maxLeft; // もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0
var panorama_width; //画像の幅
window.onload = function () {
setPicture();
}
function setPicture(){
dragObj = null;
document.getElementById('panorama_wrapper').onmousemove = mouseMove;
document.onmouseup = mouseUp;
document.getElementById('panorama_wrapper').onmousedown = mouseDown;
panorama_width = document.getElementById('panorama_image').clientWidth;
maxLeft = document.getElementById('panorama_wrapper').clientWidth - panorama_width;
// maxLeft = document.getElementById('panorama_wrapper').clientWidth - panorama_width*2; // 360°パノラマの場合、この行を使用する。
// もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0
var img = document.getElementById('panorama_image');
img.style.width = panorama_width*2+"px";
xcache = 0;
}
function mouseDown(e) {
if(window.event) e = window.event;
dragObj = this;
var x = e.clientX ; // マウスダウンした場所のスクリーンの座標
dx = x - xcache; // マウスダウンした場所の画像の座標
}
function mouseMove(e) {
if(!dragObj)return;
if(window.event) e = window.event;
var x = e.clientX ;
var xcache_tmp = x - dx; // ドラッグによる移動量
// if ( xcache_tmp >0 ) {xcache_tmp -= panorama_width;} // 360°パノラマの場合、この行を使用する。
// if ( xcache_tmp <maxLeft ) {xcache_tmp += panorama_width;} // 360°パノラマの場合、この行を使用する。
if(maxLeft < xcache_tmp && 0 >= xcache_tmp){ // 画像が可動の範囲であれば実行
document.getElementById('panorama_image').style.left = xcache_tmp + "px";
xcache = xcache_tmp; // 画像の左端のスクリーンの左端に対する座標
}
if(window.event) window.event.returnValue = false;
else return false;
}
function mouseUp (e) {
dragObj = null;
}
◆css(panorama.css)
div#panorama_wrapper {
overflow: hidden;
position: relative;
}
div#panorama_image {
position: absolute;
cursor : pointer;
}
