javascript如何实现360度全景照片问题汇总

本文为大家分享了做360度的全景照片的详细步骤，其中要注意以下几个问题：
1、如何在拖图片时，使其加载变快？---注意让图片隐藏的性能比让图片切换的性能高，且在IE9下运行，会出现图片加载的问题
2、如何使图片带有一定的速度转
3、考虑如果x为负数和负数两种情况
代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" type="text/css" href="style.css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>window.onload=function （）{var oImg=document.getElementById（"img1"）;//第一张图片var aImg=document.getElementsByTagName（"img"）;var lastimage=oImg;var x=0;//鼠标拖动某一个点，用该点的位置，来改变srcvar speed=0;var lastx=0;var timer=null;var temp=0;for（i=0;i<77;i++）{var oNewImage=document.createElement（"img"）;oNewImage.src="img/miaov （"+i+"）.jpg"; oNewImage.style.display="none";document.body.appendChild（oNewImage）;//先将77张图片隐藏}document.onmousedown=function（ev）{clearInterval（timer）;var oEvent=ev||event;var disx=oEvent.clientX-x;document.onmousemove=function（ev）{ var oEvent=ev||event; x=oEvent.clientX-disx; setMove（）;speed=x-lastx;//记录前后两个速度 lastx=x;return false;}document.onmouseup=function（）{ document.onmousemove=null; document.onmouseup=null; timer=setInterval（function（）{x+=speed;setMove（）; document.title=speed; },30）;}function setMove（）{ if（speed>0）{speed--;} else if（speed==0）{clearInterval（timer）;} else {speed++;} temp=-x;//temp要设为全局变量 if（temp>0） {temp=-x%77; } else {temp=-x+（-Math.floor（-x/77）*77）; } //oImg.src="img/miaov （"+temp+"）.jpg"; //这里外面要用单引号//alert（aImg.length）; lastimage.style.display="none";//先让最后一张变为none（刚开始也为第一张，鼠标没有移动时，第一张图片是显示的） aImg[temp].style.display="block";//当打开页面时，出现的默认为第一张图片 lastimage=aImg[temp];document.title=temp;}return false;}}</script></head><body><img id="img1" src="img/miaov （0）.jpg" /><！--<div id="bg"></div><div id="prog">360度全景展示 载入中......<span>0%</span><div id="bar"></div></div>--></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助。