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
Umfassende Übersicht über die verschiedenen Abhörmethoden von Vue3.0
Inhaltsverzeichnis Hörer 1.Uhreneffekt 2.Uhr 1.1 ...
Einführung in MyCat, die Datenbank-Middleware
1. Mycat-Anwendungsszenarien Mycat wurde für eine...
Implementieren einer verteilten Sperre mit MySQL
einführen In einem verteilten System ist die vert...
So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04
Installieren Sie das SSH-Tool 1. Öffnen Sie das T...
Docker installiert Redis 5.0.7 und behebt externe Konfigurations- und Datenprobleme
Redis ist eine Open-Source-NoSQL-Datenbank, die i...
Implementierung von Zehntausenden gleichzeitigen Verbindungen auf einer einzigen Maschine mit nginx+lua
nginx ist unser am häufigsten verwendeter Server,...
MySQL-Datenbanktabellendesign mit Baumstruktur
Inhaltsverzeichnis Vorwort 1. Basisdaten 2. Verer...
Eine kurze Diskussion über die maximale Anzahl geöffneter Dateien für MySQL-Systembenutzer
Was Sie aus Büchern lernen, ist immer oberflächli...
Erläuterung der Vorsichtsmaßnahmen für die Mysql-Master-Slave-Replikation
1. Fehler beim Verbinden mit Master 'x@xxxx:x...
So verwenden Sie Shell-Skripte in Node
Hintergrund Während der Entwicklung benötigen wir...
So verwenden Sie vw+rem für das mobile Layout
Verwenden Sie immer noch das flexible Rem-Layout?...
Verwenden der Outline-Offset-Eigenschaft in CSS zum Implementieren eines Pluszeichens
Angenommen, es gibt einen solchen Anfangscode: &l...
Eine erfahrene Person zeigt Ihnen, wie Sie ein professionelles und standardisiertes MySQL-Startskript entwickeln
Jeder qualifizierte Linux-Betriebs- und Wartungsm...
JavaScript implementiert die asynchrone Übermittlung von Formulardaten
In diesem Artikelbeispiel wird der spezifische Ja...
Standardzusammenfassung zur Analyse der Leistung einer SQL-Anweisung
In diesem Artikel wird die Verwendung von „Explai...