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:
|
<<: CentOS 7.x Docker verwendet die Overlay2-Speichermethode
>>: Detaillierte Fehlerbehebung bei Docker.service-Startfehlern
Artikel empfehlen
Beispiel für das Abrufen der neuesten Daten mithilfe einer MySQL-Mehrtabellenassoziations-Eins-zu-viele-Abfrage
Dieser Artikel beschreibt anhand eines Beispiels,...
Detaillierte Erläuterung der Vorverarbeitungsmethode für WeChat-Applet-Anforderungen
Frage Da einige unserer Seiten Daten im Onload-Mo...
Einige Details zu MySQL-Indizes
Vor ein paar Tagen stellte mir ein Kollege eine F...
Erfahren Sie, wie Sie Docker unter Windows 10 Home Edition installieren.
Als ich die Bücher über Redis und Spring Cloud Al...
Ausführliche Erklärung des Binlogs in MySQL 8.0
1 Einleitung Das Binärprotokoll zeichnet SQL-Anwe...
Spezifische Methode zum Löschen des MySQL-Dienstes
MySQL meldet den folgenden Fehler Ich ging zu „Sy...
Designtheorie: Menschenorientiertes Green Design
Überlegungen zu den beiden Sichtweisen „menscheno...
JavaScript zum Erzielen eines Fensteranzeigeeffekts
In diesem Artikel wird der spezifische JavaScript...
WeChat-Applet implementiert Sortierfunktion basierend auf Datum und Uhrzeit
Ich habe vor kurzem ein kleines Programmierprojek...
Vue+axios-Beispielcode zum Hochladen von Bildern und Erkennen von Gesichtern
Inhaltsverzeichnis Axios-Anfrage Qs-Verarbeitungs...
Zusammenfassung der Grundsätze zum Schreiben von HTML-Seiten für E-Mails
Da HTML-E-Mail keine unabhängige HOST-Seite auf di...
Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können
Inhaltsverzeichnis DOM-Verarbeitung Arrays Verfah...
Grundlegende MySQL-Grundlagen: Gruppierungsfunktion, Aggregatfunktion, Gruppierungsabfrage – ausführliche Erklärung
Inhaltsverzeichnis 1. Einfach zu bedienen 2. Verw...
Webdesign: Skriptmaterialien rekonstruieren das Benutzererlebnis
<br />Originaltext: http://blog.rexsong.com/...
Semantische Webseiten XHTML semantische Auszeichnung
Ein weiterer wichtiger Aspekt bei der Trennung vo...