Artikel ini menjelaskan metode penerapan fungsi dinding foto oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/1999/xhtml">
<head>
<meta charset = "UTF-8">
<Title> JS Foto Wall </itement>
<meta http-equiv = "x-ua-kompatibel" konten = "edge">
<meta name = "viewport" content = "width = perangkat-lebar, skala awal = 1">
<meta name = "kata kunci" konten = "dinding foto js">
<meta name = "description" content = "js photo wall">
<tautan href = "css/style.css" rel = "stylesheet">
<skrip src = "move.js"> </script>
<tyle>
*{padding: 0; margin: 0;}
Li {List-style: none;}
ul {width: 660px; Tinggi: 510px; Latar belakang: #ccc; margin: 20px auto;}
li {lebar: 200px; Tinggi: 150px; margin: 10px; float: kiri; }
</tyle>
<script>
/*
var arr = ['a', 'b', 'c', 'd', 'e', 'd', 'f'];
var pos = arr.LastIndexOf ('d');
waspada (pos);
*/
window.onload = function () {
var ali = document.queryselectorall ('li');
var oinput = document.queryselector ('#btn');
var pos = [];
var len = ali.length;
var izindex = 2;
// Konversi tata letak
untuk (var i = 0; i <len; i ++) {
pos.push ([Ali [i] .Offsetleft, Ali [i] .Offsettop]);
}
untuk (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';
}
untuk (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;
})
untuk (var i = 0; i <len; i ++) {
// Tambahkan untuk menambahkan posisi acak
startMove (ali [i], {kiri: pos [randomarr [i]] [0], atas: pos [randomarr [i]] [1]});
// Koreksi indeks
Ali [i] .index = randomarr [i];
}
}
// Seret dan seret
function setDrag (obj) {
obj.onmousedown = function (ev) {
IZIndex ++;
obj.style.zindex = IZIndex;
var ev = ev || peristiwa;
var disx = ev.clientx - obj.offsetleft;
var disy = ev.clienty - obj.offsettop;
document.onmouseMove = function (ev) {
var ev = ev || peristiwa;
obj.style.left = ev.clientx- disx +'px';
obj.style.top = ev.clienty - disy +'px';
untuk (var i = 0; i <len; i ++) {
Ali [i] .style.border = 'tidak ada';
}
var nl = nearli (obj);
if (nl) {
nl.style.border = '2px solid red';
}
}
document.onmouseup = function () {
document.onmouseMove = null;
document.onmouseup = null;
var nl = nearli (obj);
if (nl) {
nl.style.border = '2px solid red';
startMove (obj, {kiri: pos [nl.index] [0], atas: pos [nl.index] [1]});
startMove (nl, {kiri: pos [obj.index] [0], atas: pos [obj.index] [1]});
var tmp = nl.index;
nl.index = obj.index;
obj.index = tmp;
nl.style.border = '';
}kalau tidak{
startMove (obj, {kiri: pos [obj.index] [0], atas: pos [obj.index] [1]});
}
}
mengembalikan false;
}
}
// Deteksi tabrakan
fungsi 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) {
mengembalikan false;
}kalau tidak{
Kembali Benar;
}
}
// Cari simpul terdekat
fungsi dekat (obj) {
indeks var = -1;
nilai var = 9999;
untuk (var i = 0; i <len; i ++) {
if (isDump (obj, ali [i]) && obj! = ali [i]) {
var c = getdis (obj, ali [i]);
if (c <value) {
nilai = c;
indeks = i;
}
}
}
if (index! =-1) {
return ali [indeks];
}kalau tidak{
mengembalikan false;
}
}
fungsi getdis (obj1, obj2) {
var x = obj1.offsetleft - obj2.offsetleft;
var y = obj1.offsettop - obj2.offsettop;
return math.sqrt (math.pow (x, 2)+math.pow (y, 2));
}
}
</script>
</head>
<body>
<tombol id = "btn"> klik </button>
<ul>
<li> <img src = "1l.jpg"> </li>
<li> <img src = "2l.jpg"> </li>
<li> <img src = "3l.jpg"> </li>
<li> <img src = "4l.jpg"> </li>
<li> <img src = "5l.jpg"> </li>
<li> <img src = "6l.jpg"> </li>
<li> <img src = "1l.jpg"> </li>
<li> <img src = "2l.jpg"> </li>
<li> <img src = "4l.jpg"> </li>
</ul>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.