javascript制作照片墙及制作过程中出现的问题

《javascript制作照片墙及制作过程中出现的问题》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、javascript制作照片墙及制作过程中出现的问题本文主要做了一个照片墙，整个制作过程，主要需要解决一下几个问题：1、如何进行布局转换？2、如何对图片进行拖拽处理？3、如何检测图片碰撞问题？进行碰撞检测4、当多个图片进行碰撞，如何取其中距离对象最小的物体?5、如何将相互碰撞的两个物体的位置相互交换？涉及到运动的类库代码如下：It:htmlgt:It;headgt;It;stylegt;body{background:black;margin:O;padding:0;color:white;font-size:50px;}p{position:absolute;width:

2、20px;margin-left:50px;}11{width:69Opx;position:relative;margin:20pxauto:}#ullli{list-style:none;float:left;margin:10px;width:200px;height:150px;z_index:1:border:5pxsolidwhite;}#ull.active{border:5pxsolidyellow;}It;/stylegt;It;metahttp-equiv=〃Content-Type^content=〃text/html:charset=utf-8〃/g

3、t;lt;titlegt;lt;/titlegt;It;scriptsrc=〃move2.js〃gt;It;/scriptgt;It;scripttype=zztext/javascript/’gt;window.onload=function(){nbsp;varoUl=document.getElementByld(’ul1’)；nbsp;varoLi=oUl.getElementsByTagName(’li’)；nbsp;varsTore=[]:nbsp;vari;nbsp;variMinZindex-2:nbsp;//进行布局转换nbsp;for(i=0;ilt;o

4、Li.length;i++)nbsp;{nbsp;nbsp;nbsp;sTore[i]={left:oLi[i].offsetLeft,top:oLi[i].offsetTop};//用数组存储每个li的左边距和高度nbsp;}nbsp;for(i=0;ilt;oLi.length;i++)nbsp;{nbsp;nbsp;nbsp;oLi[i].style.left=sTore[i].left+’px’；nbsp;nbsp;nbsp;oLi[i].style.top=sTore[i].top+’px’；nbsp;nbsp;nbsp;oLi[i].style,position

5、:’absolute’；nbsp;nbsp;nbsp;oLi[i].style,margin=0;nbsp;nbsp;nbsp;oLi[i].index=i:nbsp;}nbsp;//图片拖拽处理nbsp;for(i=0;ilt;oLi.length;i++)nbsp;{nbsp;nbsp;setDrags(oLi[i]);nbsp;}nbsp;functionsetDrags(obj)nbsp;{nbsp;nbsp;obj.onmousedown=function(ev)nbsp;nbsp;{nbsp;nbsp;nbsp;nbsp://层级问题nbsp;nbsp:nbsp

6、:obj.style,zlndex=iMinZindex++;nbsp;nbsp;nbsp;varoEvent=ev

7、

8、event;nbsp;nbsp;nbsp:vardisx=oEvent.dientX-obj.offsetLeft;nbsp;nbsp;nbsp:vardisy=oEvent.dientY-obj.offsetTop;nbsp;nbsp;nbsp;document.onmousemove=function(ev)nbsp;nbsp:nbsp;{nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;varoEvent=ev

9、

10、

11、event;nbsp;nbsp;nbsp;nbsp;obj.style,left=oEvent.clientX-disx+’px’：//注意力口pxnbsp;nbsp;nbsp;nbsp;obj.style.top=oEvent.clientY-disy+’px’；nbsp;nbsp;nbsp;nbsp;for(i=0:ilt;oLi.length;i++)nbsp;nbsp;nbsp;nbsp;{nbsp:nbsp:nbsp:nbsp;nbsp:oLi[i].className=’’；nbsp;nbsp;nb