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
So ändern Sie das MySQL-Passwort unter Centos
1. MySQL-Anmeldeeinstellungen ändern: # vim /etc/...
Ein vollständiges Beispiel für die Abfrage von Batchdaten aus einer Tabelle durch MySQL und deren Einfügen in eine andere Tabelle
Sag es im Voraus Nodejs liest die Datenbank als a...
Anweisungen zum Bereitstellen von Projekten auf Remotecomputern mithilfe des Publish Over SSH-Plugins in Jenkins
Verwendung des Plugins „Veröffentlichen über SSH“...
Eine Frage zum Verständnis mehrerer Parameter des Sortierbefehls in Linux
Der Sortierbefehl wird sehr häufig verwendet, ver...
Einige nützliche Methoden zur Meta-Einstellung (unbedingt lesen)
<meta name="viewport" content="...
Detaillierte Erläuterung der Idee des MySQL-Triggers zur Echtzeiterkennung einer Anweisung zum Sichern und Löschen
Problembeschreibung: Der Benutzer hat die Anforde...
Linux löst das Problem, dass Deepin den Google Chrome-Browser nicht als Root-Benutzer starten kann
Um das Problem zu lösen, dass Deepin den Google C...
js Array-Einträge () Holen Sie sich die Iterationsmethode
Inhaltsverzeichnis 1. Detaillierte Syntax der Met...
Analyse der MySQL-Ansichtsfunktionen und Anwendungsbeispiele
Dieser Artikel veranschaulicht anhand von Beispie...
Docker+Nextcloud zum Erstellen eines persönlichen Cloud-Speichersystems
1. Docker-Installation und -Start yum installiere...
Hintergrundbild-Cache unter IE6
Fehler beim Flackern des CSS-Hintergrundbilds in ...
Vue realisiert den Produktlupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
MySQL-Partitionierungspraxis mit Navicat
MySQL-Partitionierung ist hilfreich bei der Verwa...
Tutorial zur Installation von MySQL 5.7.28 auf CentOS 6.2 (MySQL-Hinweise)
1. Umweltvorbereitung 1.MySQL-Installationspfad: ...
Detaillierte Analyse des Befehls chmod zum Ändern der Dateiberechtigungen unter Linux
Verwenden Sie den Linux-Befehl chmod , um zu steu...