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度全景图片的主要内容，如果未能解决你的问题，请参考以下文章