js-Implementierung der Fotowandfunktion example_javascript skills-js-Tutorial-php.cn

js-Implementierung der Fotowandfunktion example_javascript skills

WBOY

Freigeben： 2016-05-16 16:15:39

Original

1867 Leute haben es durchsucht

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:

js照片墙







 *{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> /* var arr=['a','b','c','d','e','d','f']; var pos = arr.lastIndexOf('d'); alarm(pos); */ window.onload=function(){ var aLi = document.querySelectorAll('li'); var oInput = document.querySelector('#btn'); var pos = []; var len= aLi.length; var izIndex= 2; //布局转换 for(var i=0;i<len;i ){ pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]); } for(var i=0;i<len;i ){ aLi[i].style.left=pos[i][0] 'px'; aLi[i].style.top=pos[i][1] 'px'; aLi[i].style.position = 'absolute'; aLi[i].style.margin = '0px'; } for(var i=0;i<len;i ){ aLi[i].index = i; setDrag(aLi[i]); } oInput.onclick=function(){ var randomArr = [0,1,2,3,4,5,6,7,8]; randomArr.sort(function(num1,num2){ return Math.random()-0.5; }) for(var i=0;i<len;i ){ //增加随机位置的情况 startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]}); //修正索引 aLi[i].index = randomArr[i]; } } //拖拽 Funktion setDrag(obj){ obj.onmousedown =function(ev){ izIndex ; obj.style.zIndex= izIndex; var ev = ev || Ereignis; var disX = ev.clientX - obj.offsetLeft; var disY = ev.clientY - obj.offsetTop; document.onmousemove=function(ev){ var ev = ev || Ereignis; obj.style.left = ev.clientX- disX 'px'; obj.style.top = ev.clientY - disY 'px'; for(var i=0; i<len; i ){ aLi[i].style.border='none'; } var nL = nearLi(obj); if(nL){ nL.style.border='2px einfarbig rot'; } } document.onmouseup= function(){ document.onmousemove = null; document.onmouseup = null; var nL = nearLi(obj); if(nL){ nL.style.border='2px einfarbig rot'; startMove(obj,{left:pos[nL.index][0],top:pos[nL.index][1]}); startMove(nL,{left:pos[obj.index][0],top:pos[obj.index][1]}); var tmp =nL.index; nL.index = obj.index; obj.index = tmp; nL.style.border=''; }else{ StartMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]}); } return false; } } //Erkennen, ob eine Kollision vorliegt Funktion isDump(obj1,obj2){ var l1= obj1.offsetLeft; var r1= l1 obj1.offsetWidth; var t1= obj1.offsetTop; var b1 =obj1.offsetHeight t1; var l2= obj2.offsetLeft; var r2= l2 obj2.offsetWidth; var t2= obj2.offsetTop; var b2 =obj2.offsetHeight t2; If(b2<t1 || l2>r1 || r2<l1 || t2>b1){ return false; }else{ return true; } } //Finde den nächstgelegenen Knoten Funktion nearLi(obj){ var index= -1; var value =9999; for(var i=0; i<len; i){ If(isDump(obj,aLi[i]) && obj !=aLi[i]){ var c = getDis(obj,aLi[i]); If(c <value){ value = c; index = i; } } If(index !=-1){ Gibt aLi[index]; zurück }else{ return false; } } Funktion getDis(obj1,obj2){ var x = obj1.offsetLeft - obj2.offsetLeft; var y = obj1.offsetTop - obj2.offsetTop; Gibt Math.sqrt(Math.pow(x,2) Math.pow(y,2)); zurück > > </script>


 clic

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