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>
以上就是本文的全部内容,希望对大家的学习有所帮助。