《javascript如何实现360度全景照片问题汇总_》由会员分享，可在线阅读，更多相关《javascript如何实现360度全景照片问题汇总_（6页珍藏版）》请在金锄头文库上搜索。
1、javascript如何实现360度全景照片问题汇总_ 本文为大家分享了做360度的全景照片的具体步骤，其中要留意以下几个问题： 1、如何在拖图片时，使其加载变快？-留意让图片隐蔽的性能比让图片切换的性能高，且在IE9下运行，会消失图片加载的问题 2、如何使图片带有肯定的速度转 3、考虑假如x为负数和负数两种状况 代码如下: !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head link rel=stylesheet type=text/
2、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;/鼠标拖动某一个点，用该点的位置，来转变src var speed=0; var lastx
3、=0; var timer=null; var temp=0; for(i=0;i77;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.cli
4、entX-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; ,3
5、0); function setMove() if(speed0)speed-; else if(speed=0)clearInterval(timer); else speed+; temp=-x;/temp要设为全局变量 if(temp0) 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（刚开头也为第一张，鼠标没有移动时，第一张图片是显示的） aImgtemp.style.display=block;/当打开页面时，消失的默认为第一张图片 lastimage=aImgtemp; document.title=temp; return false; /script /head body img id=img1 src=img/miaov (0).jpg / !-div id=bg/div div id=prog 360度全景展现 载入中.span0%/span div id=bar/div /div- /body /html 以上就是本文的全部内容，盼望对大家的学习有所关心。 .
