360度パノラマ写真をjQueryでスクロールで表示させるページを作成
360度風景写真をjQueryでスクロールできるイメージビューを作成しました。
デモではマウスドラッグでのスクロールとボタンによるスクロールを実装しています。
目次（読みたい所をクリック!!）
1.画像の設置
今回はこちらの画像を使用します。
画像の配置ですが、<img>タグを使用しても良いですが今回はパノラマ写真なのでCSSの標準プロパティでリピートが可能なBackgroundとして画像を配置します。
コードは以下です。
<div id="wrapper">
<div id="mContents">
</div>
<a href="#" id="move_left_btn"><img src="imgs/arrow_left.png" alt="左へ" class="move_left"></a>
<a href="#" id="move_right_btn"><img src="imgs/arrow_right.png" alt="右へ" class="move_right"></a>
</div>div#wrapper {
position:relative;
border-top: 1px solid #86670f;
border-bottom:1px solid #ae9768;
}
div#wrapper .move_left{
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
margin:auto;
}
div#wrapper .move_right{
display:block;
position:absolute;
top:0;
bottom:0;
right:0;
margin:auto;
}
div#mContents {
width: 100%;
height: 657px;
background-image:url(imgs/park-1456270_1920.jpg);
background-repeat:repeat-x;
cursor: move;
background-position: 50%;
}#mContentsにパノラマ表示させる背景画像を設定し、X方向にリピートさせます。
高さは画像の高さと同じで良いでしょう。
後はbackground-positionを移動させるだけで写真が繰り返し表示されます。
プロパティは%でもpxでも問題無いですが今回は画像の中央からスライドを始めたかったので%指定にしています。
2.パノラマ写真を移動させる処理を記述
基本はbackground-positionの値を変更させることで写真の位置を移動させています。
ページが読み込まれたらmoveBG関数を呼び出しsetIntervalで繰り返し処理をさせます。
これで、speedの値を変更するだけで画像が任意の方向に移動します。
初期値は0なので止まっています。
$(document).ready(function () {
//アニメーション開始
moveBgFlg = true;
setInterval(function(){
if(moveBgFlg) moveBG();
}, 1);
});
/* 眺望スクロール */
//スクロールスピード
var speed = 0;
//画像幅
var width = 2902;
//画像X座標
var bgX = 50;
//アニメーションon//off
var moveBgFlg = false;
//マウスダウン判定
var mouseDown = false;
//マウスダウン位置
var mouseDownX;
/*
表示したい方向の矢印クリックで移動
画像をクリックでスクロール停止/ドラッグで移動
*/
$(function(){
//左に背景を移動
$('#move_left_btn').mousedown(function(){
speed = -0.6;
});
$('#move_left_btn').mouseup(function(){
speed = 0.;
});
$('#move_left_btn').bind("dragend",function(){
speed = 0;
});
//右に背景を移動
$('#move_right_btn').mousedown(function(){
speed = 0.6;
});
$('#move_right_btn').mouseup(function(){
speed = 0;
});
$('#move_right_btn').bind("dragend",function(){
speed = 0;
});
//背景をストップ
//右に背景を移動
$('#mContents').mousedown(function(evt){
moveBgFlg = false;
mouseDown = true;
});
$('#wrapper').mousemove(function(evt){
mouseDownX = evt.offsetX;
});
$('#mContents').mousemove(function(evt){
if(mouseDown){
bgX = bgX + (mouseDownX - evt.offsetX) / 5;
$('#mContents').css({'background-position': bgX + '% ' + 0 + 'px'});
}
});
$('#mContents').mouseup(function(){
moveBgFlg = true;
mouseDown = false;
});
});
function moveBG(){
//画像のサイズまで移動したら0に戻る。
//if (bgX <= -width) bgX= 0;
//scrollSpeed分移動
bgX += speed;
$('#mContents').css({'background-position': bgX + '% ' + 0 + 'px'});
}mouseupのイベントが呼び出されないバグ
注意しなければいけないのがボタンを押して離した時の処理でmouseupだけだとボタンを押す→ドラッグ→別のとこでクリックを離すという動作をしたときにmouseupイベントが呼ばれません。
そのために、.bind(“dragend”）というイベントも呼び出しています。
マウスのドラッグでパノラマ写真の位置を変更させる方法
マウスの現在の座標はmousemoveイベントで取得することができます。
要素の上にマウスがある時に呼び出されるのでドラッグを感知するにはmousedownイベントと併用して使用しなければなりません。
また、mousemoveイベントではその座標の位置を取得するだけなのでマウスをクリックした位置から離した距離までを計測しなければなりません。
そのため、パノラマ写真を描画している要素の上に要素をかぶせて、上の要素から下の要素へのタイムラグを利用して、ドラッグ機能を実装しています。