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.οnlοad=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.οnmοusedοwn=function(event){
clearInterval(timer);
var ev=event || window.event;
disX=ev.clientX-x; //鼠标按下的位置
document.οnmοusemοve=function(event){
var ev=event || window.event;
x=ev.clientX-disX;
move();
speed=x-lastPos;//此时的速度 根据你鼠标移动的快慢不同 大小不同
lastPos=x;
return false; //为了拖动的时候防止选中图片
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=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=lw;
}
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>
更多专业前端知识，请上【猿2048】www.mk2048.com