JS implementiert Layoutkonvertierung in Animation
|
Beim Schreiben von Animationen mit JS wird häufig die Layoutkonvertierung verwendet, d. h. die Umwandlung der relativen Positionierung in eine absolute Positionierung vor der Bewegung und anschließende Ausführung der Animationsfunktion. Hier ist eine Demo der Layoutkonvertierung, die durch natives JS implementiert wurde. Der Effekt ist wie folgt:
Nachfolgend sehen Sie die Codeimplementierung. Jeder kann sie kopieren, einfügen und kommentieren.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Natives JS implementiert Layoutkonvertierung in Animation</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
#ul1 {
Breite: 366px;
Rand: 0 automatisch;
Position: relativ;
}
#ul1 li {
Listenstil: keiner;
Breite: 100px;
Höhe: 100px;
Hintergrund: #CCC;
Rand: 1px tief schwarz;
schweben: links;
Rand: 10px;
Z-Index: 1;
}
</Stil>
<!-- Bewegungsrahmen -->
<Skript>
// Den Wert der angegebenen Stilfunktion abrufen getStyle(obj, attr) {
wenn (obj.aktuellerStil) {
returniere obj.currentStyle[attr];
} anders {
gibt getComputedStyle zurück (Objekt, false) [attr];
}
};
//Bewegungsfunktion function 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)
}
</Skript>
<!-- Ereignis hinzufügen -->
<Skript>
fenster.onload = Funktion () {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var iMinZindex = 2;
var i = 0;
// 1. Layoutkonvertierung für (i = 0; i < aLi.length; i++) {
//aLi[i].innerHTML='links:'+aLi[i].offsetLeft+', oben:'+aLi[i].offsetTop;
aLi[i].style.left = aLi[i].offsetLeft + 'px';
aLi[i].style.top = aLi[i].offsetTop + 'px';
}
// Es werden zwei Schleifen benötigt for (i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolut';
//In der ersten Schleife wurde der Offsetwert bereits als ursprünglicher Randwert berechnet und muss daher hier gelöscht werden aLi[i].style.margin = '0';
}
// 2. Ereignis hinzufügen für (i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = Funktion () {
//Lassen Sie den aktuellen zIndex weiter ansteigen, um ein Stapeln zu verhindern. this.style.zIndex = iMinZindex++;
starteBewegung(diese, {
Breite: 200,
Höhe: 200,
Rand links: -50,
marginTop: -50
});
};
aLi[i].onmouseout = Funktion () {
starteBewegung(diese, {
Breite: 100,
Höhe: 100,
Rand links: 0,
Rand oben: 0
});
};
}
};
</Skript>
</Kopf>
<Text>
<ul-ID="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>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:
|
<<: Tutorial zur Installation von MySQL 8.0.18 unter Windows (Community Edition)
>>: Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien
Artikel empfehlen
Nginx: Ein Domänenname für den Zugriff auf mehrere Projekte – Methodenbeispiel
Hintergrund Kürzlich stieß ich bei der Bereitstel...
Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage
Detaillierte Erläuterung der Implementierungsmeth...
Detailliertes Beispiel für MySQL-Datenspeicherprozessparameter
Es gibt drei Typen von MySQL-gespeicherten Prozed...
Aggregatabfrage- und Union-Abfragevorgänge für MySQL-Datenbanken
Inhaltsverzeichnis 1. Einfügen der abgefragten Er...
Detaillierte Erklärung zur Konfiguration des Keepalived-Protokolls auf einem anderen Pfad in CentOS7
Keepalived-Installation: cd <keepalived_source...
Detaillierte Erläuterung von 2 Methoden zum Synchronisieren der Netzwerkzeit im Linux/CentOS-System
Aus Hardwaregründen kann es vorkommen, dass die M...
Ein einfaches Beispiel für die MySQL-Suche nach Daten im Umkreis von N Kilometern
Gemäß dem Koeffizienten von Pi und dem Radius der...
Lösung für MySQL-Fehlercode 1862 Ihr Passwort ist abgelaufen
Der Blogger hat MySQL ein oder zwei Monate lang n...
Was ist dies in einer Punkt-für-Punkt-Reihe von JavaScript?
Verstehe das Vielleicht haben Sie this in anderen...
jQuery implementiert einen Zeitselektor
In diesem Artikelbeispiel wird der spezifische Co...
Grafisches Tutorial zur Installation von MySQL 5.5 unter Win7
Die MySQL-Installation ist relativ einfach. Norma...
Mit HTML+CSS3 implementierte Anmeldeschnittstelle
Ergebnisse erzielen Bauen Sie zunächst mit HTML e...
Tutorial zur Installation und Verwendung der verteilten Ceph-Software unter Linux
Inhaltsverzeichnis Vorwort 1. Grundlegende Umgebu...
Unterschiede und Vergleiche von Speicher-Engines in MySQL
MyISAM-Speicher-Engine MyISAM basiert auf der ISA...
Detailliertes grafisches Tutorial zur Installation der entpackten Version von MySQL unter Windows 10
Die MySQL-Installation ist in eine Installationsv...