用javascript實現3d（水平或者垂直方向）展示物品
阿新 • • 發佈：2018-12-29
實現這樣的效果，其原理和拍電影一樣，就是一幀一幀連續起來，只不過電影是自己一直在放映，而我們的“電影”（展示的物體）是要使用者自己通過滑鼠的拖動來實現“放映”。
準備工作，首先需要一個物體的模型，然後把這個物體沿需求方向，進行360度截圖。圖片最好大於60張，圖片越多，拖動起來越順滑。（我很懶，粗略地截了53張。）
css:
body {margin:0;} img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;}
html和js:
<!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 x=0; //要展示的哪一張圖片 var origin_img=document.getElementById('show'); //獲取所有有關與要顯示的物體的360度截圖 var array_img=document.getElementsByTagName('img'); //last_img是最後顯示的圖片。 var last_img=origin_img; var timer=null; var i=0; //這個for迴圈是為了在網頁一開始就把所有的圖片就載入， // 不然如果是要顯示哪一張到時再載入，會使讓物體一卡一卡。 for(i=1;i<53;i++) { (function (new_img){ var origin_img=new Image(); origin_img.onload=function () { new_img.src=this.src; }; origin_img.src='img/'+i+'.png'; new_img.style.display='none'; document.body.appendChild(new_img);//把新生成的img加入body })(document.createElement('img')); } document.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-x; clearInterval(timer); document.onmousemove=function (ev) { var oEvent=ev||event; x=disX-oEvent.clientX; move(); return false; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; }; function move() { //l是要顯示圖片的索引 var l=parseInt(-x/10); if(l>0) { l=l%53;//正向移動 } else { l=l+-Math.floor(l/53)*53;//反向 } //當最後顯示的圖片和 將要顯示的 不一時，last_img隱藏。 if(last_img!=array_img[l]) { last_img.style.display='none'; array_img[l].style.display='block'; last_img=array_img[l]; } } return false; }; }; </script> </head> <body> <img id="show" src="img/1.png" /> </body> </html>