360度全景图片

Posted liveoutfun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了360度全景图片相关的知识,希望对你有一定的参考价值。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#imgBox{

height: 378px;
width: 640px;
position: relative;
margin:100px auto;

}
#imgBox img{

position: absolute;

}
</style>

</head>
<body>

<div id="imgBox"><img src="img/miaov (0).jpg" height="378" width="640" id="img1" ></div>
<script>
var imgBox=document.getElementById("imgBox");

//预加载 防止卡顿
for(var i=1;i<77;i++){

(function(oImg){

var img=new Image();

img.onload=function(){

oImg.src=this.src;

}


img.src="img/miaov ("+i+").jpg";
oImg.style.display="none";
imgBox.appendChild(oImg);

})(document.createElement("img"))

}

var allImgs=document.getElementsByTagName("img");//所有图片元素
var lastImg=document.getElementById("img1");//上一张图片元素

var speed=0; //当抬起鼠标那一刻的速度
var lastPos=0;//上一次鼠标move的位置
var x=0; // 记录鼠标move的位置

var timer=null;//定时器

document.onmousedown=function(event){

clearInterval(timer);
var ev=event || window.event;

disX=ev.clientX-x; //鼠标按下的位置

document.onmousemove=function(event){

var ev=event || window.event;

x=ev.clientX-disX;

move();
speed=x-lastPos;//此时的速度 根据你鼠标移动的快慢不同 大小不同
lastPos=x;

return false; //为了拖动的时候防止选中图片


}


document.onmouseup=function(){

document.onmousemove=null;
document.onmouseup=null;



timer=setInterval(function(){

x+=speed;
move();

}, 1000/60)

}

return false; //为了拖动的时候防止选中图片
}

 

function move(){

speed>0?speed--:speed++;
if(speed==0){

clearInterval(timer);
}
var l=parseInt(x/10);

if(l>0){

l=l%77;

}

else{

l=l+-Math.floor(l/77)*77;

}


if(allImgs[l]!=lastImg){

lastImg.style.display="none";
allImgs[l].style.display="block";
lastImg=allImgs[l];


}

}

</script>
</body>
</html>

以上是关于360度全景图片的主要内容,如果未能解决你的问题,请参考以下文章

max如何渲染720度全景图

三百六十度全景图如何拍摄?

360度全景图片

怎么做360度全景图?

[JavaScript案例]360度全景照片

使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果