Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen

In diesem Artikel erfahren Sie mehr über eine zusammengesetzte Bewegung, die mit nativem JS implementiert wurde. Die sogenannte zusammengesetzte Bewegung bedeutet, dass sich verschiedene Attribute im gleichen Intervall ändern. Der Effekt ist wie folgt:

Der Implementierungscode lautet wie folgt. Sie können ihn gerne kopieren, einfügen und kommentieren.

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen</title>
    <Stil>
        #div1 {
            Breite: 100px;
            Höhe: 100px;
            Hintergrund: rot;
            Deckkraft: 0,3;
        }
    </Stil>
    <Skript>
        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 () {
                //Schalter einstellen, um zu verhindern, dass sich andere Werte nicht mehr ändern, nachdem ein bestimmter Wert erreicht wurde 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 ein bestimmter Wert nicht erreicht wurde, ist bStop false
                    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 dies in der letzten Schleifenrunde zutrifft, wird der Timer gelöscht if (bStop) {
                    Intervall löschen(Objekt.Timer);
                    wenn (fn) {
                        fn();
                    }
                }
            }, 30)
        }
    </Skript>
    <Skript>
        fenster.onload = Funktion () {
 
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');
 
            oBtn.onclick = Funktion () {
 
                startMove(oDiv, {
                    Breite: 400,
                    Höhe: 200,
                    Deckkraft: 100
                });
            };
        };
    </Skript>
</Kopf>
 
<body style="Hintergrund:#0F0;">
    <input id="btn1" type="button" value="Übung starten" />
    <div id="div1"></div>
</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:

Python Maschinelles Lernen NLP Natürliche Sprachverarbeitung Word2vec Filmrezensionsmodellierung
Python Maschinelles Lernen NLP Verarbeitung natürlicher Sprache Grundlegende Operationen Genaue Wortsegmentierung
Python Maschinelles Lernen NLP Verarbeitung natürlicher Sprache Grundlegende Operationen Nachrichten Klassifizierung
Python Maschinelles Lernen NLP Natürliche Sprachverarbeitung Grundlegende Bedienung Schlüsselwörter
Python, maschinelles Lernen, NLP, natürliche Sprachverarbeitung, grundlegende Operationen, Wortvektormodell
Python Maschinelles Lernen NLP Verarbeitung natürlicher Sprache Grundlegende Operationen Klassifizierung häuslicher Gewalt
Eine kurze Einführung in Python NLP
Python, maschinelles Lernen, NLP, Verarbeitung natürlicher Sprache, grundlegende Operationen, Filmkritik, Analyse

<<: Detaillierte Schritte zur Installation von MySQL 5.7 über YUM auf CentOS7

>>: Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies

Tipps zum Anzeigen von Text in Linux (super praktisch!)

Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen

Tipps zum Anzeigen von Text in Linux (super praktisch!)

Detaillierte Einführung in die gespeicherten MySQL-Funktionen

Zwei Möglichkeiten zum Exportieren von CSV in Win10 MySQL

Der Ansichtsbereich im Meta-Tag steuert das Gerätebildschirm-CSS

Ausführliches Tutorial zur Installation von WinX64 unter MySQL8.0.18 (mit Bildern und Text)

Ein praktischer Bericht über einen durch den MySQL-Start verursachten Unfall

Verwendung von Provide und Inject in Vue3

MySQL-Abfrage gibt an, dass das Feld keine Zahl und kein Komma SQL ist

Tutorial zur Konfiguration und Verwendung des MySQL-Protokolls für langsame Abfragen

Detaillierte Erläuterung des Installationsprozesses von msf auf einem Linux-System

Artikel empfehlen

So erstellen Sie ein Tomcat-Image basierend auf Dockerfile

Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()

Ähnlich wie HTML-Tags: strong und em, q, cite, blockquote

MySQL-Operator-Zusammenfassung

Grundlegendes Handbuch für Webdesign 216 Websichere Farben

JS implementiert das Auf- und Abgleiten auf dem mobilen Endgerät, jeweils einen Bildschirm nach dem anderen

Schritte zum Importieren von Millionen von Daten in MySQL mit .Net Core

Senden Sie das Image über den Container DockerCommit und pushen Sie das Image DockerPush

Detaillierte Erklärung des Unterschieds zwischen run/cmd/entrypoint in Docker

Implementieren der Prioritätswarteschlange in JavaScript

Fassen Sie den User-Agent beliebter Browser zusammen

So legen Sie Listenstilattribute in CSS fest (lesen Sie einfach diesen Artikel)

So stellen Sie sicher, dass auf jeder Seite des WeChat Mini-Programms eine Anmeldung erfolgt

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12

Einführung und Installation von vue-cli