Dieser Artikel beschreibt die Methode zur Implementierung der Funktion der Fotowand durch JS. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/1999/xhtml">
<kopf>
<meta charset = "utf-8">
<title> js foto wall </title>
<meta http-äquiv = "x-ua-kompatible" content = "edge">
<meta name = "viewPort" content = "width = Gerätebidth, initial-scale = 1">
<meta name = "keywords" content = "js foto wall">
<meta name = "Beschreibung" content = "js foto wall">
<link href = "css/style.css" rel = "stylesheet">
<script src = "move.js"> </script>
<Styles>
*{Padding: 0; Rand: 0;}
li {Listenstil: Keine;}
ul {width: 660px; Höhe: 510px; Hintergrund: #ccc; Margin: 20px Auto;}
li {width: 200px; Höhe: 150px; Rand: 10px; float: links; }
</style>
<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;
// Layoutkonvertierung
für (var i = 0; i <len; i ++) {
pos.push ([ali [i] .offsetleft, ali [i] .offsettop]);
}
für (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 = 'absolut';
Ali [i] .Style.margin = '0px';
}
für (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;
})
für (var i = 0; i <len; i ++) {
// Hinzufügen, um zufällige Positionen hinzuzufügen
startMove (ali [i], {links: pos [randomarr [i]] [0], top: pos [randomarr [i]] [1]});
// Korrektur des Index
Ali [i] .Index = randomarr [i];
}
}
// ziehen und ziehen
Funktionsetdrag (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';
für (var i = 0; i <len; i ++) {
Ali [i] .Style.border = 'none';
}
var nl = Nearli (OBJ);
if (nl) {
nl.style.border = '2px fest rot';
}
}
document.onmouseUp = function () {
document.onmousemove = null;
document.onmouseUp = null;
var nl = Nearli (OBJ);
if (nl) {
nl.style.border = '2px fest rot';
startMove (obj, {links: pos [nl.index] [0], oben: pos [nl.index] [1]});
startMove (nl, {links: pos [obj.index] [0], oben: pos [obj.index] [1]});
var tmp = nl.index;
nl.index = obj.index;
obj.index = tmp;
nl.style.border = '';
}anders{
startMove (obj, {links: pos [obj.index] [0], oben: pos [obj.index] [1]});
}
}
false zurückgeben;
}
}
// Kollisionserkennung
Funktion isdump (obj1, obj2) {
var l1 = obj1.offsetleft;
var r1 = l1+obj1.offsetwidth;
var t1 = obj1.offsettop;
var b1 = obj1.offseteight +t1;
var l2 = obj2.offsetleft;
var r2 = l2+obj2.offsetwidth;
var t2 = obj2.offsettop;
var b2 = obj2.offseteight +t2;
if (b2 <t1 || l2> r1 || r2 <l1 || t2> b1) {
false zurückgeben;
}anders{
zurückkehren;
}
}
// Suchen Sie nach dem nächsten Knoten
Funktion in der Nähe von (obj) {
var index = -1;
var value = 9999;
für (var i = 0; i <len; i ++) {
if (isdump (obj, ali [i]) && obj! = ali [i]) {
var c = getdis (obj, ali [i]);
if (c <value) {
Wert = C;
index = i;
}
}
}
if (index! =-1) {
return ali [index];
}anders{
false zurückgeben;
}
}
Funktion 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>
<button id = "btn"> klicken Sie auf </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>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.