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
Detaillierte Erläuterung der MySql-Datentyp-Tutorialbeispiele
Inhaltsverzeichnis 1. Kurzübersicht 2. Detaillier...
Implementierung einer vereinfachten Version von JSON.stringify und seine sechs Hauptfunktionen im Detail erklärt
Inhaltsverzeichnis Vorwort Sechs Funktionen von J...
Warum der Befehl „explain“ MySQL-Daten ändern kann
Wenn Sie jemand fragen würde, ob die Ausführung v...
Lösung für das Problem, dass Flash-Animationen auf Webseiten nicht angezeigt werden
<br />Die Lösungsschritte sind wie folgt: St...
MySQL 5.6-Binärinstallationsprozess unter Linux
1.1 Download des binären Installationspakets wget...
Eine gründliche Analyse der HTML-Sonderzeichen
Eine gründliche Analyse von HTML (14) Sonderzeich...
Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen
Inhaltsverzeichnis 1. Prinzip der Animationsfunkt...
Ubuntu 20.04 CUDA- und cuDNN-Installationsmethode (grafisches Tutorial)
CUDA-Installation, cuda herunterladen Geben Sie d...
Mehrere Möglichkeiten zur manuellen Implementierung von HMR in Webpack
Inhaltsverzeichnis 1. Einleitung 2. GitHub 3. Gru...
Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion
<br />Im Bereich des Netzwerkdesigns erfreut...
Detaillierte Erklärung der Props-Konfiguration von Vue
<Vorlage> <div Klasse="Demo"&g...
WeChat-Applet-Canvas implementiert Signaturfunktion
Im WeChat-Applet-Projekt umfasst das Entwicklungs...
Implementierungscode zum Hinzufügen von Links zu FLASH über HTML (Div-Ebene)
Heute möchte ein Kunde eine Anzeige schalten und d...
Docker löst das Problem, dass das Terminal kein Chinesisch eingeben kann
Vorwort: Eines Tages baute ich einen MySQL-Dienst...
MySQL implementiert die kontinuierliche Anmeldefunktion und startet nach einem Tag der Anmeldung von vorne (SQL-Anweisung).
1. Erstellen Sie eine Testtabelle CREATE TABLE `t...