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:
|
<<: Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies
>>: MySQL 8.0.19 Win10 - Schnellinstallations-Tutorial
Artikel empfehlen
Es gibt kein Problem mit dem Linux-Dateipfad beim Bereitstellen der Fenster- und Linux-Projekte
Ich habe schon lange keinen Blog mehr geschrieben...
Detaillierte Erklärung der CSS-Textdekoration Textdekoration & Texthervorhebung
In CSS ist Text eines der häufigsten Dinge, mit d...
Analyse des Unterschieds zwischen absolutem und relativem Pfad in HTML
Wie in der Abbildung gezeigt: Mit einer einzelnen ...
So erstellen Sie eine Vue3-Desktopanwendung
In diesem Artikel sehen wir uns an, wie man mit V...
Implementierungsschritte zum Erstellen eines Webpack5-React-Gerüsts von Grund auf (mit Quellcode)
Inhaltsverzeichnis webpack5 Offizieller Start Bau...
Vorschläge zum Erstellen geschäftlicher HTML-E-Mails
Durch E-Mail-Marketing auf Genehmigungsbasis lass...
JavaScript implementiert coole Mouse-Tailing-Effekte
Nachdem Sie sich das angesehen haben, garantiere ...
So mounten Sie eine neue Festplatte auf einem Linux-Cloud-Server
Hintergrund Im Unternehmen wurde ein neuer Server...
Analyse des Ausschnitts des Hintergrundbildes des Neunerrasters mit adaptiver Breite und Höhe
<br />Basierend auf dem ursprünglichen, in B...
HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren
Einführung Kürzlich musste ich für einen großen A...
Gründe, warum MySQL den Abfrage-Cache abgebrochen hat
MySQL hatte zuvor einen Abfragecache, Query Cache...
Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache
Inhaltsverzeichnis 1. Vorbereitung vor der Entwic...
Detaillierte Erklärung zur Verwendung von HTML-Einbettungs-Tags und -Attributen
1. Grundlegende Grammatik Code kopieren Der Code ...
Die Magie des tbody-Tags beschleunigt die Anzeige von Tabelleninhalten
Sie haben sicher schon einmal die Webseiten andere...
Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung
Inhaltsverzeichnis Problembeschreibung: Lösung 1 ...