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:

Detaillierte Erklärung der JavaScript-Timer
Details zum JavaScript-Timer
JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion
Mehrere Möglichkeiten zur Implementierung eines 0-ms-Verzögerungstimers in js
JavaScript-Timer zum nahtlosen Scrollen von Bildern
Detaillierte Erklärung des JavaScript-Timer-Prinzips

<<: Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System

>>: Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang

Beispiele und Zusammenfassung der In-, Out- und Inout-Parameter von gespeicherten MySQL-Prozeduren

Verwenden des JS-Timers zum Verschieben von Elementen

Beispiele und Zusammenfassung der In-, Out- und Inout-Parameter von gespeicherten MySQL-Prozeduren

Detaillierte Schritte zum Portieren von Busybox zum Erstellen eines minimalen Root-Dateisystems

So importieren, registrieren und verwenden Sie Komponenten in Stapeln in Vue

Tutorial zum Konfigurieren und Ändern von Passwörtern für die kostenlose MySQL-Installationsversion

CSS3 realisiert die Mask Barrage-Funktion

Reduzieren Sie die Speicher- und CPU-Auslastung durch die Optimierung von Webseiten

Automatisierte Schnittstellentests mit Postman

Reines CSS, um einen automatischen Rotationseffekt des Karussellbanners zu erzielen

Zusammenfassung der Kenntnisse und der Verwendung von Linux-VI-Befehlen

So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue

Artikel empfehlen

JavaScript-Closures erklärt

Detaillierte Erklärung der Anzeigemodi in CSS-Tags

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

MySQL-Startfehlerproblem und Szenarioanalyse

Sprechen Sie über wichtige Unterverzeichnisprobleme im Linux-System

Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten

Installieren Sie Tomcat und stellen Sie die Website unter Linux bereit (empfohlen)

Installieren Sie MySQL offline mit RPM unter CentOS 6.4

Teilen Sie 20 JavaScript-Einzeilencodes

CSS kompletter Parallax-Scrolling-Effekt

Füllen Sie die Suchfunktion auf der HTML-Seite aus

So optimieren Sie den Logikbeurteilungscode in JavaScript

Schritte zum Erstellen eines WEBSERVERS mit NODE.JS

Zwei Möglichkeiten zum Erstellen eines privaten GitLab mit Docker

Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT