js实现照片墙功能实例_javascript技巧

本文实例讲述了js实现照片墙功能的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:

   
       
       
       
       
       
       
       
       
       
        <script><br /> /*<br /> var arr=['a','b','c','d','e','d','f'];<br /> var pos = arr.lastIndexOf('d');<br /> alert(pos);<br /> */<br /> window.onload=function(){<br /> var aLi = document.querySelectorAll('li');<br /> var oInput = document.querySelector('#btn');<br /> var pos = [];<br /> var len= aLi.length;<br /> var izIndex= 2;<br /> //布局转换 <p> for(var i=0;i<len;i++){<br /> pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]);<br /> }<br /> for(var i=0;i<len;i++){<br /> aLi[i].style.left=pos[i][0]+'px';<br /> aLi[i].style.top=pos[i][1]+'px';<br /> aLi[i].style.position = 'absolute';<br /> aLi[i].style.margin = '0px';<br /> }<br /> for(var i=0;i<len;i++){<br /> aLi[i].index = i;<br /> setDrag(aLi[i]);<br /> } <br /> oInput.onclick=function(){<br /> var randomArr = [0,1,2,3,4,5,6,7,8];<br /> randomArr.sort(function(num1,num2){<br /> return Math.random()-0.5;<br /> })<br /> for(var i=0;i<len;i++){<br /> //增加随机位置的情况<br /> startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});<br /> //修正索引<br /> aLi[i].index = randomArr[i];<br /> } <br /> }<br /> //拖拽<br /> function setDrag(obj){<br /> obj.onmousedown =function(ev){<br /> izIndex++;<br /> obj.style.zIndex= izIndex;<br /> var ev = ev || event;<br /> var disX = ev.clientX - obj.offsetLeft;<br /> var disY = ev.clientY - obj.offsetTop;<br /> document.onmousemove=function(ev){<br /> var ev = ev || event;<br /> obj.style.left = ev.clientX- disX +'px';<br /> obj.style.top = ev.clientY - disY +'px';<br /> for(var i=0; i<len; i++){<br /> aLi[i].style.border='none';<br /> } <br /> var nL = nearLi(obj); <br /> if(nL){<br /> nL.style.border='2px solid red';<br /> } <br /> }<br /> document.onmouseup= function(){<br /> document.onmousemove = null;<br /> document.onmouseup = null;<br /> var nL = nearLi(obj); <br /> if(nL){<br /> nL.style.border='2px solid red';<br /> startMove(obj,{left:pos[nL.index][0],top:pos[nL.index][1]});<br /> startMove(nL,{left:pos[obj.index][0],top:pos[obj.index][1]});<br /> var tmp =nL.index;<br /> nL.index = obj.index;<br /> obj.index = tmp;<br /> nL.style.border='';<br /> }else{<br /> startMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});<br /> } <br /> }<br /> return false;<br /> }<br /> }<br /> //检测是否有碰撞<br /> function isDump(obj1,obj2){<br /> var l1= obj1.offsetLeft;<br /> var r1= l1+obj1.offsetWidth;<br /> var t1= obj1.offsetTop;<br /> var b1 =obj1.offsetHeight +t1; <p> var l2= obj2.offsetLeft;<br /> var r2= l2+obj2.offsetWidth;<br /> var t2= obj2.offsetTop;<br /> var b2 =obj2.offsetHeight +t2;<br /> if(b2<t1 || l2>r1 || r2<l1 || t2>b1){<br /> return false;<br /> }else{<br /> return true;<br /> }<br /> }<br /> //寻找最近的节点<br /> function nearLi(obj){<br /> var index= -1;<br /> var value =9999;<br /> for(var i=0; i<len; i++){<br /> if(isDump(obj,aLi[i]) && obj !=aLi[i]){<br /> var c = getDis(obj,aLi[i]);<br /> if(c <value){<br /> value = c;<br /> index = i;<br /> }<br /> }<br /> } <br /> if(index !=-1){<br /> return aLi[index];<br /> }else{<br /> return false;<br /> }<br /> }<br /> function getDis(obj1,obj2){<br /> var x = obj1.offsetLeft - obj2.offsetLeft;<br /> var y = obj1.offsetTop - obj2.offsetTop;<br /> return Math.sqrt(Math.pow(x,2)+Math.pow(y,2));<br /> }<br /> }<br /> </script>
   
   
    click
       

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

       

     

希望本文所述对大家的javascript程序设计有所帮助。