首頁 > 開發者 > JavaScript
本文主要做了一個照片牆，整個製作過程，主要需要解決一下幾個問題：
1、如何進行布局轉換？
2、如何對圖片進行拖拽處理？
3、如何檢測圖片碰撞問題？進行碰撞檢測
4、當多個圖片進行碰撞，如何取其中距離對象最小的物體？
5、如何將相互碰撞的兩個物體的位置相互交換？涉及到運動的類庫
代碼如下：
<html><head><style>body{background:black;margin: 0;padding: 0;color: white;font-size: 50px;}p{position: absolute;width:20px;margin-left: 50px;}#ul1{width: 690px;position: relative;margin: 20px auto;}#ul1 li{list-style: none;float: left;margin: 10px;width: 200px;height: 150px;z-index: 1;border: 5px solid white;}#ul1 .active{border: 5px solid yellow;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="move2.js"></script><script type="text/javascript">window.onload=function (){ var oUl=document.getElementById('ul1'); var oLi=oUl.getElementsByTagName('li'); var sTore=[]; var i; var iMinZindex=2; //進行布局轉換 for(i=0;i<oLi.length;i++) { sTore[i]={left:oLi[i].offsetLeft,top:oLi[i].offsetTop};//用數組儲存每個li的左邊距和高度 } for(i=0;i<oLi.length;i++) { oLi[i].style.left=sTore[i].left+'px'; oLi[i].style.top=sTore[i].top+'px'; oLi[i].style.position='absolute'; oLi[i].style.margin=0; oLi[i].index=i; } //圖片拖拽處理 for(i=0;i<oLi.length;i++) { setDrags(oLi[i]); } function setDrags(obj) { obj.onmousedown=function(ev) { //層級問題 obj.style.zIndex=iMinZindex++; var oEvent=ev||event; var disx=oEvent.clientX-obj.offsetLeft; var disy=oEvent.clientY-obj.offsetTop; document.onmousemove=function(ev) { var oEvent=ev||event; obj.style.left=oEvent.clientX-disx+'px';//注意加px obj.style.top=oEvent.clientY-disy+'px'; for(i=0;i<oLi.length;i++) { oLi[i].className=''; } var oNear=findNearest(obj); if(oNear)//如果是最近的那個物體 { oNear.className='active'; } }; document.onmouseup=function() { document.onmousemove=null; document.onmousedown=null; //交換兩物體的位置 var oNear=findNearest(obj); if(oNear) { startMove(oNear,sTore[obj.index]); startMove(obj,sTore[oNear.index]); //交換索引值 var temp; temp=obj.index; obj.index=oNear.index; oNear.index=temp; } else { startMove(obj,sTore[obj.index])//回到自己的位置 } return false; }; clearInterval(obj.timer); return false; }; }//發生碰撞，使被碰的圖片加邊框,進行碰撞檢測function IBoundTest(obj1,obj2){ var l1=obj1.offsetLeft; var r1=obj1.offsetLeft+obj1.offsetWidth; var t1=obj1.offsetTop; var b1=obj1.offsetTop+obj1.offsetHeight; var l2=obj2.offsetLeft; var r2=obj2.offsetLeft+obj2.offsetWidth; var t2=obj2.offsetTop; var b2=obj2.offsetTop+obj2.offsetHeight; if(r1<l2||l1>l2||b1<t2||t1>b2)//沒有碰撞 { return false; } else { return true; }}//得到兩個物體之間的距離function getDis(obj1,obj2){ var a=obj1.offsetLeft-obj2.offsetLeft; var b=obj1.offsetTop-obj2.offsetTop; return Math.sqrt(a*a+b*b);}//發生碰撞，當與多個碰撞時，取其距離最小的圖片function findNearest(obj){ var iMin=9999999; var iMindex=-1; var i; for(i=0;i<oLi.length;i++) { if(obj==oLi[i]){continue;} if(IBoundTest(obj,oLi[i]))//如果兩個物體碰撞上 { var dis=getDis(obj,oLi[i]); if(iMin>dis) { iMin=dis; iMindex=i; } } } if(iMindex==-1){return null;} else { return oLi[iMindex];//返回最近的那個 }} }</script></head><body ><p>照片牆</p><ul id="ul1"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> <li><img src="images/5.jpg"></li> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li></ul></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
