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:

Vue.js implementiert eine Konvertierungsmethode für das Rasterlistenlayout

<<: Tutorial zur Installation von MySQL 8.0.18 unter Windows (Community Edition)

>>: Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien

JS implementiert Layoutkonvertierung in Animation

12 nützliche Array-Tricks in JavaScript

Verwendung und Demonstration von ref in Vue

Eine kurze Diskussion über die Verwendung der Web Storage API

Tastenkombinationsvorgang für SQL Server-Kommentare

CSS3 realisiert das Papierflugzeug aus der Kindheit

So bringen Sie Ihren Browser dazu, mit JavaScript zu sprechen

Grundlegende Verwendung von exists, in und any in MySQL

Detaillierte Erläuterung des Beispiels zum Exportieren von Daten aus einer angegebenen Tabelle in MySQL

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Detaillierte Analyse der Auswahl des MySQL-Gemeinschaftsindex und des eindeutigen Index

Artikel empfehlen

So betten Sie mithilfe von Iframe andere Webseiten in eine Webseite ein

js zum Hochladen von Bildern auf den Server

Erweiterte MySQL-Datenbankabfrage und Mehrtabellenabfrage

So verwenden Sie einen Docker-Container für den Zugriff auf das Host-Netzwerk

Detaillierte Erläuterung der Mysql-Funktionsaufrufoptimierung

Die Aktualisierungsseite für die Formularübermittlung springt nicht zum Quellcodedesign

Verwenden von CSS3 zum Erzielen von Übergangs- und Animationseffekten

Eine einfache Möglichkeit, mit dem HTML-Tag „Marquee“ einen Scroll-Effekt zu erzielen (unbedingt lesen)

Zusammenfassung der Wissenspunkte der Komponente zur Leistungsoptimierung des ersten Vue-Bildschirms

js+Html zur Realisierung einer Tabellenbearbeitungsoperation

MySQL-Schnellwiederherstellungslösung basierend auf dem Zeitpunkt

Eine kurze Diskussion über JavaScript-Drosselung und Anti-Shake

Grafisches Tutorial zur Installation von MySQL 5.5.27

Zusammenfassung der CSS-Methoden zum Löschen von Floats

Lösung für den ES-Speicherüberlauf beim Starten von Docker