Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen

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

Artikel empfehlen

js, um den Popup-Effekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

RHCE installiert Apache und greift mit einem Browser auf IP zu

1. at ist so konfiguriert, dass nach 5 Stunden „D...

Ein einfaches Beispiel zum Erstellen einer dünnen Linientabelle in HTML

Wenn Sie wissen möchten, wie Sie diese Tabelle mi...

Durch Kombinieren von Einfügen und Auswählen wird die Methode „Einfügen des Maximalwerts eines Felds in der Datenbank + 1“ implementiert.

Dieser Artikel ist MySQL-Datenbank Frage 1 Import...

So verwenden Sie Chrome Dev Tools zur Analyse der Seitenleistung (Front-End-Leistungsoptimierung)

Hintergrund Wir verwenden Chrome Dev Tools häufig...

Grundprinzipien für die Zusammenstellung einer Website-Homepage

1. Die Organisationsstruktur des Hypertext-Dokumen...

Einführung und Verwendung von fünf Controllern in K8S

Inhaltsverzeichnis Controllertyp von k8s Beziehun...

Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe

1. Grundlegende Einführung in die Linux-Gruppe Un...

Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL

1. Beschreibung Wenn wir in MySQL die Gesamtzahl ...

Verwenden Sie das NJS-Modul, um JS-Skripte in die Nginx-Konfiguration einzuführen

Inhaltsverzeichnis Vorwort 1. NJS-Modul installie...

So verwenden Sie den Linux-Befehl seq

1. Befehlseinführung Mit dem Befehl seq (Sequence...

Detaillierte Beispiele für Ersetzen und Ersetzen in MySQL into_Mysql

„Replace“ und „Replace into“ von MySQL sind beide...

So konfigurieren Sie die Datei My.ini bei der Installation der MySQL5.6.17-Datenbank

Ich habe kürzlich bei der Entwicklung eines Proje...

Fallstudie zum JavaScript DOMContentLoaded-Ereignis

DOMContentLoaded-Ereignis Es wird buchstäblich au...

Löschvorgang für Docker-Volumes

prune Um diesen Befehl verwenden zu können, müsse...