本文為大家分享了做360度的全景照片的詳細(xì)步驟，其中要注意以下幾個問題：
1、如何在拖圖片時，使其加載變快？---注意讓圖片隱藏的性能比讓圖片切換的性能高，且在IE9下運行，會出現(xiàn)圖片加載的問題
2、如何使圖片帶有一定的速度轉(zhuǎn)
3、考慮如果x為負(fù)數(shù)和負(fù)數(shù)兩種情況
代碼如下：
<!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>無標(biāo)題文檔</title><script>window.onload=function (){ var oImg=document.getElementById('img1');//第一張圖片 var aImg=document.getElementsByTagName('img'); var lastimage=oImg; var x=0;//鼠標(biāo)拖動某一個點，用該點的位置，來改變src var 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要設(shè)為全局變量 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';//先讓最后一張變?yōu)閚one（剛開始也為第一張，鼠標(biāo)沒有移動時，第一張圖片是顯示的） aImg[temp].style.display='block';//當(dāng)打開頁面時，出現(xiàn)的默認(rèn)為第一張圖片 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> 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
