Verwenden des JS-Timers zum Verschieben von Elementen
|
Verwenden Sie einen JS-Timer, um ein Element zu erstellen, das eine Methode mit Bewegungseffekt erzeugt. Die Implementierungsidee ist: Deklarieren Sie zuerst eine Variable, um die Distanz des Elements von der linken Seite zu speichern, deklarieren Sie dann eine Variable, um die Distanz zu speichern, um die sich das Element jedes Mal bewegen muss, und geben Sie dieser Methode dann eine Abschlusszeit. Es ist zu beachten, dass der erhaltene Wert, wenn es sich nicht um numerische Daten handelt, konvertiert werden muss, da er sonst nicht beurteilt werden kann. Legen Sie dann fest, dass das Element, nachdem es sich an eine bestimmte Position bewegt hat, einen negativen Schrittwert erhält, und das Element wird sich wieder zurückbewegen. Sie können auch darüber nachdenken, wie Sie den Dreheffekt erzielen, wenn sich das Element auf die linke oder rechte Seite bewegt.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<style type="text/css">
*{Rand: 0;Padding: 0;}
Körper{Position: relativ;}
#Kasten{
Breite: 120px; Höhe: 120px; Hintergrund: grün;
Position: absolut;oben: 100px;
/* Hier können Sie ein Hintergrundbild als Ziel der Bewegung einführen, */
/* Hintergrund: URL (Bild/paobu_huaban.png) 0 0/100 % 100 %; */
}
</Stil>
</Kopf>
<Text>
<button type="button" id="Button">Klick mich an, um mich zu bewegen</button>
<div id="box" style="links: 0px;"></div>
<Skripttyp="text/javascript">
var Button = document.getElementById("Button");
var box = document.getElementById("box");
//Wie viele Pixel jedes Mal verschoben werden sollen, Schritt stellt die Schrittlänge dar, var step = 5;
Button.onclick = Funktion(){
var Timer = Intervall festlegen(Funktion(){
//Den linken Wert der Box abrufen und in eine Ganzzahl umwandeln. Vor der Berechnung muss er in einen numerischen Wert umgewandelt werden.
// parseInt bedeutet, den erhaltenen String in einen Zeichentyp umzuwandeln var o_left = parseInt(box.style.left);
//Wenn Sie möchten, dass sich das Element schneller bewegt, können Sie die Distanz jeder Bewegung vergrößern oder die Ausführungszeit verkürzen. //Aber eine Verkürzung der Ausführungszeit hat einen besseren Effekt. var n_left = o_left+step; //Jedes Mal 10px nach rechts bewegen
Box.Stil.links = n_links+"px";
if ( n_left>500) { //Wenn die Bewegungsdistanz größer als 400px ist, führe den Schritt zurück = -5 aus;
}sonst wenn(n_left==0){
Schritt = 5;
};
},100);
};
</Skript>
</body>
</html>Die Ergebnisse sind wie folgt:
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:
|
<<: Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System
>>: Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang
Artikel empfehlen
Tutorial zur Installation von PHP5, Deinstallation von PHP und Installation von PHP7 auf CentOS
Installieren Sie zunächst PHP5 ganz einfach yum i...
Bringen Sie Ihnen bei, schnell ein Webclusterprojekt basierend auf Nginx zu erstellen
Inhaltsverzeichnis 1. Projektumgebung 2. Projektb...
Detaillierte Erläuterung des Beobachtermodus ausgehend von der Komponentenwertübertragung von Vue
Inhaltsverzeichnis Beobachtermuster Vue-Pass-Wert...
Beispiele für minimalistisches Website-Design
Webanwendungsklasse 1. DownFürAlleOderNurIch Mith...
Docker-Installationstutorial: Erste Schritte (Anfängerausgabe)
Doccer-Einführung: Docker ist eine Container-bezo...
Eine kurze Analyse des Zustandsverständnisses von React
Wie definiert man komplexe Komponenten (Klassenko...
CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung
Die Bildintegrationstechnologie, die von YAHOO in...
Neue Funktionen in MySQL 8.0 - Einführung in die Verwendung des Management-Ports
Inhaltsverzeichnis Vorwort Verbindungsverwaltung ...
Detaillierte Erklärung der Truncate-Verwendung in MySQL
Vorwort: Wenn wir eine Tabelle löschen möchten, v...
Detaillierte Erklärung der Linux-RPM- und Yum-Befehle und -Verwendung
RPM-Paketverwaltung Ein Verpackungs- und Installa...
Bringen Sie Ihnen bei, wie Sie einen Tencent Cloud Server erstellen (grafisches Tutorial)
Dieser Artikel wurde ursprünglich von Bloggerin W...
Bauprozess eines privaten Docker-Lagerhafens
1. Vorbereitung 1.1 Hafen herunterladen Harbor-Do...
Detaillierte Erläuterung der für das Front-End erforderlichen Nginx-Konfiguration
Nginx (Engine x) ist ein leichter, leistungsstark...
vsCode generiert Vue-Vorlagen mit einem Klick
1. Verwenden Sie die Tastenkombination Strg + Ums...
Einführung in den Prozess der Verwendung der NFS-Remote-Verzeichnismontage in der CentOS-Umgebung
Inhaltsverzeichnis 1. Einführung in NFS 2. NFS-Ko...