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

Installation der Dekomprimierungsversion von MySQL 5.7.21 Installation des Navicat-Datenbankbetriebstools

JS implementiert Layoutkonvertierung in Animation

Installation der Dekomprimierungsversion von MySQL 5.7.21 Installation des Navicat-Datenbankbetriebstools

So verwenden Sie CSS, um das übergeordnete Container-Div mit img-Bildern zu füllen und die Containergröße anzupassen

Detaillierte Erklärung der MySQL-Datenbank-Trigger

So implementieren Sie mit MyCat die Lese-/Schreibtrennung von MySQL-Master und -Slave unter Linux

MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails

Welche Nachteile hat die Bereitstellung der Datenbank in einem Docker-Container?

So fügen Sie einen Link in HTML ein

Vue implementiert Mehrfachauswahl im unteren Popup-Fenster

MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten

Artikel empfehlen

JS beherrscht schnell die Verwendung von ES6-Klassen

Das Implementierungsprinzip von Vue Router-View und Router-Link

Automatische Dateisynchronisierung zwischen zwei Linux-Servern

HTML-Multimediaanwendung: Einfügen von Flash-Animationen und Musik in Webseiten

Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?

Verwenden Sie JavaScript, um Seiteneffekte zu erstellen

Bauprozess eines privaten Docker-Lagerhafens

Tutorial zur Installation von VMware, Nmap und Burpsuite

Detaillierte Analyse der MySQL-Sperrblockierung

Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten

Beispielcode zur Implementierung einer Schaltfläche mit Hintergrundverlauf mithilfe von Div+CSS3

Beispielschritte zur Verwendung von AntV X6 mit Vue.js

Node+Socket realisiert einfache Chatroom-Funktion

HTML-Tutorial: Das Optgroup-Element verstehen

JavaScript-Verlaufsobjekt erklärt