Native JS realisiert einheitliche Bewegungen verschiedener Sportarten

In diesem Artikel wird eine einheitliche Bewegung vorgestellt, die mit nativem JS implementiert wurde. Der Effekt ist wie folgt:

Es ist zu beachten, dass diese Art von Bewegungseffekt in der tatsächlichen Entwicklung selten verwendet wird. Elastische Bewegung und Pufferbewegung werden häufiger verwendet. Nachfolgend finden Sie die Codeimplementierung. Sie können sie gerne kopieren, einfügen und kommentieren.

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS realisiert gleichmäßige Bewegungen verschiedener Sportarten</title>
    <Stil>
        #div1 {
            Breite: 100px;
            Höhe: 100px;
            Position: absolut;
            Hintergrund: rot;
            links: 0;
            oben: 50px;
        }
 
        Spanne {
            Breite: 1px;
            Höhe: 300px;
            Hintergrund: schwarz;
            Position: absolut;
            links: 300px;
            oben: 0;
        }
 
        ;
    </Stil>
    <Skripttyp="text/javascript">
 
        var Timer = null;
        Funktion startMove(iTarget) {
 
            var oDiv = document.getElementById('div1');
 
            Intervall löschen(Timer);
            Timer = Intervall festlegen(Funktion () {
                var iSpeed = 0;
 
                wenn (oDiv.offsetLeft < iTarget) {
 
                    iGeschwindigkeit = 7;
 
                } anders {
 
                    iGeschwindigkeit = -7;
                }
                //Hat es den Endpunkt erreicht, wenn (Math.abs(oDiv.offsetLeft - iTarget) < 7) {
                    //Endpunkt erreichen clearInterval(timer);
 
                    oDiv.style.left = iTarget + 'px';
                } anders {
                    //Vor der Ankunft oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
    </Skript>
</Kopf>
 
<Text>
    <input type="button" value="Bewegung starten" onclick="startMove(300)" />
    <div id="div1"></div>
    <span></span>
</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:

js gibt die Schrittweite an, um eine gleichmäßige Bewegung in eine Richtung zu erreichen
Natives Javascript realisiert einen einheitlichen Bewegungsanimationseffekt
Analyse der Implementierungsmethode für gleichmäßige Bewegung in Javascript
Eine kurze Diskussion über die Stoppbedingungen einer gleichförmigen Bewegung in Javascript
Eine kurze Erläuterung, wie man mit Javascript eine gleichmäßige Bewegung erreicht
JS-Codebeispiel zum Erreichen einer gleichmäßigen Bewegung
Beispielcode zur Demonstration einer einheitlichen JS-Bewegung
Eine detaillierte Einführung in gleichmäßige Bewegung und Bewegung mit variabler Geschwindigkeit (gepuffert) in JavaScript

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

>>: MySQL 8.0.19 Win10 - Schnellinstallations-Tutorial

Fehlereinfügungsanalyse der Funktion „updatexml()“ von MySQL

Detaillierte Analyse der Ursache für die Meldung des Fehlers „Der Server wird beendet, ohne die PID-Datei zu aktualisieren“ beim Starten von MySQL

Bei vielen Benutzern ist dieser Fehler beim Start...

Native JS realisiert einheitliche Bewegungen verschiedener Sportarten

Fehlereinfügungsanalyse der Funktion „updatexml()“ von MySQL

Detaillierte Erklärung des Vue-Plugins

mysql charset=utf8 verstehen Sie wirklich, was es bedeutet

InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her

Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux

Vue ElementUI implementiert einen asynchronen Ladebaum

So installieren Sie das ZSH-Terminal in CentOS 7.x

MySql 8.0.11-Winxp64 (kostenlose Installationsversion) Konfigurations-Tutorial

Implementierung der kontinuierlichen Integration von Jenkins+Docker

Springboot+VUE zur Realisierung von Anmeldung und Registrierung

Artikel empfehlen

So implementieren Sie die Zuordnung zwischen Rahmenfenstern und die Verwendung des Zielattributs von Hyperlinks

Tutorial zur Installation von VMware ESXi 6.0 und Bereitstellung einer virtuellen Maschine (Bild und Text)

Detaillierte Schritte zur vollständigen Deinstallation und Neuinstallation von MySQL unter Windows 10

Docker generiert Bilder über Container und übermittelt DockerCommit im Detail

Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen

Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren

Leitfaden zu bewährten Methoden für die Benutzerautorisierung im WeChat Mini-Programm

Vue + SSM realisiert den Vorschaueffekt beim Hochladen von Bildern

Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?

Über die Probleme von Kongruenz und Ungleichheit, Gleichheit und Ungleichheit in JS

Detaillierte Erklärung des Unterschieds zwischen $router und $route in Vue

Detaillierte Analyse der Ursache für die Meldung des Fehlers „Der Server wird beendet, ohne die PID-Datei zu aktualisieren“ beim Starten von MySQL

Eine detaillierte Diskussion der Komponenten in Vue

So benennen Sie unter Linux eine Gruppe von Dateien auf einmal um

So verwenden Sie JavaScript, um mehrere gängige Browser über userAgent zu bestimmen