js-Implementierung der Fotowandfunktion example_javascript skills

Das Beispiel in diesem Artikel beschreibt, wie die Fotowandfunktion in js implementiert wird. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

   
       
       
       
       
       
       
       
       
       
            *{padding: 0; Rand: 0;}
            li{list-style: none;}
            ul{width: 660px; Höhe:510px; Hintergrund:#ccc;margin: 20px auto;}
            li{width:200px; Höhe: 150px; Rand: 10px; schweben: links; }
       
        <script><br>         /*<br>             var arr=['a','b','c','d','e','d','f'];<br>             var pos = arr.lastIndexOf('d');<br>             alarm(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 />                 Funktion setDrag(obj){<br />                     obj.onmousedown =function(ev){<br />                         izIndex ;<br />                         obj.style.zIndex= izIndex;<br />                         var ev = ev || Ereignis;<br />                         var disX = ev.clientX - obj.offsetLeft;<br />                         var disY = ev.clientY - obj.offsetTop;<br />                         document.onmousemove=function(ev){<br />                            var ev = ev || Ereignis;<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 einfarbig rot';<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 einfarbig rot';<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 />                                                                                                                                                                                        }                                                                                          return false;                  }<br />                 }<br /> //Erkennen, ob eine Kollision vorliegt<br />                     Funktion 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;<br /><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;                        }else{<br>                                   return true;<br>                  }<br>                 }<br> //Finde den nächstgelegenen Knoten<br> Funktion 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; index = i;<br>                                                                                                }                                                                                                        }                                                                                                                                                                     If(index !=-1){<br> Gibt aLi[index];<br> zurück                        }else{<br>                                                                                          return false;                  }<br>                 }<br>                     Funktion getDis(obj1,obj2){<br>                     var x = obj1.offsetLeft - obj2.offsetLeft;<br>                        var y = obj1.offsetTop - obj2.offsetTop;<br> Gibt Math.sqrt(Math.pow(x,2) Math.pow(y,2));<br> zurück                ><br>             ><br>         </script>
   
   
    clic
       

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

       

     

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