hujung hadapan web
tutorial js
js pelaksanaan photo wall function example_javascript kemahiran
js pelaksanaan photo wall function example_javascript kemahiran
Contoh dalam artikel ini menerangkan cara melaksanakan fungsi dinding foto dalam js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:
*{padding: 0; jidar: 0;}
li{list-style: none;}
ul{lebar: 660px; ketinggian:510px; latar belakang:#ccc;margin: 20px auto;}
li{width:200px; ketinggian: 150px; jidar: 10px; terapung: kiri; }
/*
var arr=['a','b','c','d','e','d','f'];
var pos = arr.lastIndexOf('d');
makluman(pos);
*/
window.onload=function(){
var aLi = document.querySelectorAll('li');
var oInput = document.querySelector('#btn');
var pos = [];
var len= aLi.length;
var izIndex= 2;
//布局转换
untuk(var i=0;i
}
untuk(var i=0;i
aLi[i].style.top=pos[i][1] 'px';
aLi[i].style.position = 'mutlak';
aLi[i].style.margin = '0px';
}
untuk(var i=0;i
setDrag(aLi[i]);
}
oInput.onclick=function(){
var randomArr = [0,1,2,3,4,5,6,7,8];
randomArr.sort(function(num1,num2){
kembalikan Math.random()-0.5;
})
untuk(var i=0;i
startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});
//修正索引
aLi[i].index = rawakArr[i];
}
}
//拖拽
fungsi setDrag(obj){
obj.onmousedown =function(ev){
izIndex ;
obj.style.zIndex= izIndex;
var ev = ev || acara;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove=function(ev){
var ev = ev || acara;
obj.style.left = ev.clientX- disX 'px';
obj.style.top = ev.clientY - disY 'px';
untuk(var i=0; i
}
var nL = nearLi(obj);
jika(nL){
nL.style.border='2px merah pepejal';
}
}
document.onmouseup= function(){
document.onmousemove = null;
document.onmouseup = null;
var nL = nearLi(obj);
jika(nL){
nL.style.border='2px merah pepejal';
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='';
}lain{
StartMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});
return palsu
}
}
//Kesan sama ada terdapat perlanggaran
fungsi ialah Dump(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;
Jika(b2
return palsu
}lain{
kembali benar;
}
}
//Cari nod terdekat
fungsi berhampiranLi(obj){
var index= -1;
nilai var =9999;
untuk(var i=0; i
var c = getDis(obj,aLi[i]);
Jika(c
indeks = i;
Jika(indeks !=-1){
Kembalikan aLi[indeks];
}lain{
return palsu
}
}
fungsi getDis(obj1,obj2){
var x = obj1.offsetLeft - obj2.offsetLeft;
var y = obj1.offsetTop - obj2.offsetTop;
Kembalikan Math.sqrt(Math.pow(x,2) Math.pow(y,2));
}
}
