Cet article décrit la méthode d'implémentation de la fonction du mur photo par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/1999/xhtml">
<adal>
<meta charset = "utf-8">
<Title> JS Mur photo </TITME>
<meta http-equiv = "x-ua compatible" content = "edge">
<meta name = "Viewport" Content = "width = Device-width, initial-scale = 1">
<meta name = "Keywords" contenu = "JS Photo Wall">
<meta name = "Description" Content = "JS Photo Wall">
<link href = "css / style.css" rel = "Stylesheet">
<script src = "move.js"> </ script>
<style>
* {rembourrage: 0; marge: 0;}
li {list-style: aucun;}
ul {largeur: 660px; Hauteur: 510px; Contexte: #ccc; marge: 20px auto;}
li {largeur: 200px; hauteur: 150px; marge: 10px; flottant: à gauche; }
</ style>
<cript>
/ *
var arr = ['a', 'b', 'c', 'd', 'e', 'd', 'f'];
var pos = arr.LastIndexof ('d');
alerte (pos);
* /
window.onload = function () {
var ali = document.QuerySelectorall ('li');
var oinput = document.QuerySelector ('# btn');
var pos = [];
var len = ali.length;
var izindex = 2;
// Conversion de mise en page
pour (var i = 0; i <len; i ++) {
pos.push ([ali [i] .offsetleft, ali [i] .offsetTop]);
}
pour (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';
}
pour (var i = 0; i <len; i ++) {
Ali [i] .Index = i;
setDrag (Ali [i]);
}
Oinput.OnClick = fonction () {
var randomarr = [0,1,2,3,4,5,6,7,8];
randomarr.sort (fonction (num1, num2) {
retour math.random () - 0,5;
})
pour (var i = 0; i <len; i ++) {
// ajouter pour ajouter des positions aléatoires
startMove (Ali [i], {Left: pos [randomarr [i]] [0], top: pos [randomarr [i]] [1]});
// Correction de l'index
Ali [i] .Index = randomarr [i];
}
}
// traîner et glisser
fonction setDrag (obj) {
obj.onmousedown = fonction (ev) {
izindex ++;
obj.style.zindex = izindex;
var ev = ev || événement;
var disx = ev.clientx - obj.offsetLeft;
var disy = ev.clienty - obj.offsetTop;
document.onMouseMove = fonction (ev) {
var ev = ev || événement;
obj.style.left = ev.clientx- disx + 'px';
obj.style.top = ev.clienty - disy + 'px';
pour (var i = 0; i <len; i ++) {
Ali [i] .style.border = 'Aucun';
}
var nl = quart (obj);
if (nl) {
nl.style.border = '2px solide rouge';
}
}
document.onmouseup = function () {
document.onMouseMove = null;
document.onmouseUp = null;
var nl = quart (obj);
if (nl) {
nl.style.border = '2px solide rouge';
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 = '';
}autre{
startMove (obj, {Left: pos [obj.index] [0], en haut: pos [obj.index] [1]});
}
}
retourne false;
}
}
// Détection de collision
fonction 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) {
retourne false;
}autre{
Retour Vrai;
}
}
// recherche le nœud le plus proche
Fonction Nearli (obj) {
var index = -1;
VAR VALLE = 9999;
pour (var i = 0; i <len; i ++) {
if (isDump (obj, ali [i]) && obj! = ali [i]) {
var c = getDis (obj, ali [i]);
if (c <value) {
valeur = c;
index = i;
}
}
}
if (index! = - 1) {
return ali [index];
}autre{
retourne false;
}
}
fonction 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));
}
}
</cript>
</ head>
<body>
<Button id = "btn"> Cliquez sur </fontificateur>
<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>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.