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:20pxauto;}
#ul1li{list-style:none;float:left;margin:10px;width:200px;height:150px;z-index:1;border:5pxsolidwhite;}
#ul1.active{border:5pxsolidyellow;}
</style>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scriptsrc="move2.js"></script>
<scripttype="text/javascript">
window.onload=function()
{
varoUl=document.getElementById('ul1');
varoLi=oUl.getElementsByTagName('li');
varsTore=[];
vari;
variMinZindex=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]);
}
functionsetDrags(obj)
{
obj.onmousedown=function(ev)
{
//层级问题
obj.style.zIndex=iMinZindex++;
varoEvent=ev||event;
vardisx=oEvent.clientX-obj.offsetLeft;
vardisy=oEvent.clientY-obj.offsetTop;
document.onmousemove=function(ev)
{
varoEvent=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='';
}
varoNear=findNearest(obj);
if(oNear)//如果是最近的那个物体
{
oNear.className='active';
}
};
document.onmouseup=function()
{
document.onmousemove=null;
document.onmousedown=null;
//交换两物体的位置
varoNear=findNearest(obj);
if(oNear)
{
startMove(oNear,sTore[obj.index]);
startMove(obj,sTore[oNear.index]);
//交换索引值
vartemp;
temp=obj.index;
obj.index=oNear.index;
oNear.index=temp;
}
else
{
startMove(obj,sTore[obj.index])//回到自己的位置
}
returnfalse;
};
clearInterval(obj.timer);
returnfalse;
};
}
//发生碰撞，使被碰的图片加边框,进行碰撞检测
functionIBoundTest(obj1,obj2)
{
varl1=obj1.offsetLeft;
varr1=obj1.offsetLeft+obj1.offsetWidth;
vart1=obj1.offsetTop;
varb1=obj1.offsetTop+obj1.offsetHeight;
varl2=obj2.offsetLeft;
varr2=obj2.offsetLeft+obj2.offsetWidth;
vart2=obj2.offsetTop;
varb2=obj2.offsetTop+obj2.offsetHeight;
if(r1<l2||l1>l2||b1<t2||t1>b2)//没有碰撞
{
returnfalse;
}
else
{
returntrue;
}
}
//得到两个物体之间的距离
functiongetDis(obj1,obj2)
{
vara=obj1.offsetLeft-obj2.offsetLeft;
varb=obj1.offsetTop-obj2.offsetTop;
returnMath.sqrt(a*a+b*b);
}
//发生碰撞，当与多个碰撞时，取其距离最小的图片
functionfindNearest(obj)
{
variMin=9999999;
variMindex=-1;
vari;
for(i=0;i<oLi.length;i++)
{
if(obj==oLi[i]){continue;}
if(IBoundTest(obj,oLi[i]))//如果两个物体碰撞上
{
vardis=getDis(obj,oLi[i]);
if(iMin>dis)
{
iMin=dis;
iMindex=i;
}
}
}
if(iMindex==-1){returnnull;}
else
{
returnoLi[iMindex];//返回最近的那个
}
}
}
</script>
</head>
<body>
<p>照片墙</p>
<ulid="ul1">
<li><imgsrc="images/1.jpg"></li>
<li><imgsrc="images/2.jpg"></li>
<li><imgsrc="images/3.jpg"></li>
<li><imgsrc="images/4.jpg"></li>
<li><imgsrc="images/5.jpg"></li>
<li><imgsrc="images/1.jpg"></li>
<li><imgsrc="images/2.jpg"></li>
<li><imgsrc="images/3.jpg"></li>
<li><imgsrc="images/4.jpg"></li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。