本文主要做了一個照片牆，整個制作過程，主要需要解決一下幾個問題：
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>
以上就是本文的全部內容，希望對大家的學習有所幫助。