Natives JS zum Erstellen einer Drag-Fotowand

Dieser Artikel zeigt Ihnen eine verschiebbare Fotowand, die mit nativem JS implementiert wurde. Der Effekt ist wie folgt:

Der Implementierungscode lautet wie folgt:

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS zum Ziehen der Fotowand und Austauschen von Fotos</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
 
        #ul1 {
            Breite: 660px;
            Position: relativ;
            Rand: 10px automatisch;
        }
 
        #ul1 li {
            Breite: 200px;
            Höhe: 150px;
            schweben: links;
            Listenstil: keiner;
            Rand: 10px;
            Z-Index: 1;
        }
 
        #ul1 .aktiv {
            Rand: 1px gestrichelt rot;
        }
    </Stil>
    <script src="js/move.js"></script>
    <Skript>
        fenster.onload = Funktion () {
 
            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');
            var aPos = [];
            var iMinZindex = 2;
            var i = 0;
 
            //Layoutkonvertierung //Position des aktuellen Layoutbildes abrufen for (i = 0; i < aLi.length; i++) {
 
                aPos[i] = { links: aLi[i].offsetLeft, oben: aLi[i].offsetTop };
            }
            //Die Layoutkonvertierung erfordert zwei for-Schleifen, um abgeschlossen zu werden for (i = 0; i < aLi.length; i++) {
                //Jeder Bildposition Werte zuweisen aLi[i].style.left = aPos[i].left + 'px';
                aLi[i].style.top = aPos[i].top + 'px';
 
                //Konvertierungspositionierung aLi[i].style.position = 'absolute';
                //Der Wert von „Offset“ beinhaltet bereits den Wert von „Margin“, daher müssen wir aLi[i].style.margin = '0'; abbrechen.
 
                aLi[i].index = i;
            }
 
            //Schleife ziehen für (i = 0; i < aLi.length; i++) {
                setDrag(aLi[i]);
            }
            Funktion setDrag(Objekt) {
                //Wenn die Maus gedrückt wird obj.onmousedown = function (ev) {
                    //Ereigniskompatibel var oEvent = ev || event;
 
                    //Stapelreihenfolge des aktuellen Bildes erhöhen obj.style.zIndex = iMinZindex++;
                    //Berechnen Sie die Mausposition relativ zur oberen linken Ecke des gezogenen Objekts. var disX = oEvent.clientX - obj.offsetLeft;
                    var disY = oEvent.clientY - obj.offsetTop;
 
                    //Wenn die Maus bewegt wird document.onmousemove = function (ev) {
                        //Ereigniskompatibel var oEvent = ev || event;
 
                        //Bildposition neu zuweisen obj.style.left = oEvent.clientX - disX + 'px';
                        obj.style.top = oEvent.clientY - disY + 'px';
 
                        // Alle Li-Stile löschen für (i = 0; i < aLi.length; i++) {
                            aLi[i].className = '';
                        }
 
                        //Holen Sie sich das nächstgelegene Zielobjekt des aktuellen Drag-Objekts var oNear = findNearest(obj);
                        //Wenn existiert if (oNear) {
                            // Weisen Sie die Klasse des Objekts aktiv zu
                            oNear.className = "aktiv";
 
                        }
 
                    };
 
                    //Wenn die Maus losgelassen wird document.onmouseup = function () {
 
                        Dokument.onmousemove = null;
                        Dokument.onmouseup = null;
 
                        //Holen Sie sich das nächstgelegene Zielobjekt des aktuellen Drag-Objekts var oNear = findNearest(obj);
 
                        //Wenn es ein nächstes Kollisionsobjekt gibt if (oNear) {
 
                            oNear.className = '';
 
                            //Füge den zIndex des nächstgelegenen Zielobjekts hinzu, //um eine Bewegung von hinten zu verhindern oNear.style.zIndex = iMinZindex++;
 
                            //Wenn das aktuelle Drag-Objekt über das Zielobjekt bewegt wird, befindet es sich über dem Zielobjekt obj.style.zIndex = iMinZindex++;
 
                            //Bewege das nächstgelegene Zielobjekt (oNear) zur aktuellen Objektposition (obj) startMove(oNear, aPos[obj.index]);
 
                            //Bewege das aktuelle Objekt (obj) an die Position des nächsten Zielobjekts (oNear) startMove(obj, aPos[oNear.index]);
 
 
                            //Vertausche den Indexwert des aktuellen Drag-Objekts und des Zielobjekts var tmp = 0;
 
                            tmp = Objekt.index;
                            obj.index = oNear.index;
                            oNear.index = tmp;
 
                            //Wenn es kein nächstes Kollisionsobjekt gibt} else {
                            //Zurück zur Ausgangsposition startMove(obj, aPos[obj.index]);
                        }
                    };
 
                    //Timer löschen //Um ein Ruckler zu verhindern, wenn das Bild während des Verschiebevorgangs erneut gezogen wird clearInterval(obj.timer);
 
                    //Browserfehler und Verformung des Mauszeigers beim Ziehen verhindern return false;
                };
            }
 
            //Kollisionserkennungsfunktion cdTest(obj1, obj2) {
 
                //Die linken, rechten, oberen und unteren Konturpositionen von Ziel 1 var l1 = obj1.offsetLeft;
                var r1 = obj1.offsetLeft + obj1.offsetWidth;
                var t1 = obj1.offsetTop;
                var b1 = obj1.offsetTop + obj1.offsetHeight;
 
                //Die linken, rechten, oberen und unteren Konturpositionen von Ziel 2 var l2 = obj2.offsetLeft;
                var r2 = obj2.offsetLeft + obj2.offsetWidth;
                var t2 = obj2.offsetTop;
                var b2 = obj2.offsetTop + obj2.offsetHeight;
 
                //Vergleichen Sie die Außenkonturen der beiden Ziele, um festzustellen, ob sie kollidieren, wenn (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
 
                    gibt false zurück;
 
                } anders {
 
                    gibt true zurück;
                }
            }
 
            //Berechnen Sie die Distanz zwischen dem gezogenen Objekt und anderen Objekten function getDis(obj1, obj2) {
 
                var a = obj1.offsetLeft - obj2.offsetLeft;
                var b = obj1.offsetTop - obj2.offsetTop;
 
                gibt Math.sqrt(a * a + b * b) zurück;
            }
 
            //Finde das nächste Objekt Funktion findNearest(obj) {
 
                //Referenzwert zur Ermittlung des Minimalwertes var iMin = 999999999;
 
                var iMinIndex = -1;
 
                für (i = 0; i < aLi.Länge; i++) {
 
                    //Kollision mit sich selbst vermeiden, Erkennung überspringen if (obj == aLi[i]) {
                        weitermachen
                    };
 
                    //Wenn ein Kollisionsobjekt gefunden wird if (cdTest(obj, aLi[i])) {
                        //Berechnen Sie die Distanz zwischen dem gezogenen Objekt und jedem Li var dis = getDis(obj, aLi[i]);
                        //Wenn die aktuelle Referenzdistanz größer ist als die Distanz zwischen einem bestimmten li und dem aktuellen Drag-Zielif (iMin > dis) {
                            //Referenzabstand neu zuweisen (mehrfach vergleichen, um den Mindestwert zu erhalten)
                            iMin = dis;
                            //Holen Sie sich den Index des nächsten Ziels iMinIndex = i;
                        }
                    }
                }
 
                //iMinIndex ist -1, was bedeutet, dass er noch nie angetroffen wurde, if (iMinIndex == -1) {
 
                    gibt null zurück;
 
                    //sonst} sonst {
 
                    //Gib das Li zurück, das am engsten kollidiert ist
                    gibt aLi[iMinIndex] zurück;
                }
            }
        };
    </Skript>
</Kopf>
 
<Text>
    <ul-ID="ul1">
        <li><img src="bilder/0.jpg" /></li>
        <li><img src="bilder/1.jpg" /></li>
        <li><img src="bilder/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="bilder/0.jpg" /></li>
        <li><img src="bilder/1.jpg" /></li>
        <li><img src="bilder/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
    </ul>
</body>
 
</html>

Nachfolgend sehen Sie die im obigen Code eingeführte Datei move.js, die hauptsächlich zum Erzielen von Bewegungseffekten verwendet wird. Der Code lautet wie folgt:

Funktion getStyle(Objekt, Attribut) {
    wenn (obj.aktuellerStil) {
        returniere obj.currentStyle[attr];
    } anders {
        gibt getComputedStyle zurück (Objekt, false) [attr];
    }
}
 
Funktion startMove(obj, json, fn) {
    Intervall löschen(Objekt.Timer);
    obj.timer = setzeIntervall(Funktion () {
        var bStop = true;
        für (var attr in json) {
 
            var iCur = 0;
 
            wenn (attr == 'Deckkraft') {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } anders {
                iCur = parseInt(getStyle(obj, attr));
            }
 
 
            var iSpeed = (json[attr] – iCur)/8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 
 
            wenn (iCur != json[attr]) {
                bStop = falsch;
            }
 
            wenn (attr == 'Deckkraft') {
                obj.style.filter = 'Alpha(Deckkraft:' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            } anders {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }
 
        wenn (bStop) {
 
            Intervall löschen(Objekt.Timer);
 
            wenn (fn) {
                fn();
            }
        }
    }, 30)
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Natives js zum Erzielen eines Fotowandeffekts
js, um einen 3D-Fotowandeffekt zu erzielen
Erstellen einer Fotowand mit Javascript und die Probleme, die während des Erstellungsprozesses auftreten
js, um ein cooles Fotowand-Anzeigeeffektdiagramm mit Quellcode-Download zu erzielen
JavaScript implementiert den Fotowand-Code, indem es Fotos per Ziehen und Klicken oben anordnet
js zum Erreichen eines Beispiels für die Fotowandfunktion
Realisierung eines einfachen Fotowandeffekts basierend auf three.js

<<: CentOS 7.x Docker verwendet die Overlay2-Speichermethode

>>: Detaillierte Fehlerbehebung bei Docker.service-Startfehlern