Wie erstelle ich ein bewegliches Div mit JavaScript?

Ein mobiles Div ist ein Webelement, das sich automatisch auf dem Bildschirm bewegen oder seine Position auf dem Bildschirm ändern kann. Ändern Sie die Position, indem Sie die Stileigenschaften links und oben anpassen. Das Erstellen einer mobilen Div mit JavaScript ist eine relativ einfache Aufgabe. Alles, was Sie brauchen, ist ein wenig HTML-, CSS- und JavaScript-Code. In diesem Tutorial zeigen wir Ihnen, wie Sie mit JavaScript ein mobiles Div erstellen.

HTML-Code

Das erste, was wir brauchen, ist etwas HTML-Code. Wir werden eine ID erstellen als „Abteilung verschieben“. In diesem Div werden wir einige Inhalte platzieren. Dieser Inhalt kann alles von Ihnen sein Möchten Sie, aber für dieses Beispiel fügen wir einfach etwas Text hinzu.

<div id="movingDiv"> This is my moving div! </div>

Da wir nun den HTML-Code haben, benötigen wir etwas CSS-Code.

CSS-Code

CSS-Code sorgt dafür, dass sich unser Div tatsächlich bewegt. Wir werden die Position des Div festlegen zu „Verwandten“. Dadurch können wir das Div mithilfe von JavaScript verschieben. Wir werden auch festlegen Die Breite und Höhe des Div.

#movingDiv { position: relative; width: 200px; height: 200px; }

Da wir nun den HTML- und CSS-Code haben, benötigen wir etwas JavaScript-Code.

JavaScript-Code

Der JavaScript-Code wird unseren Div tatsächlich bewegen. Wir werden die Funktion setInterval verwenden, um das Div alle 1000 Millisekunden (1 Sekunde) zu verschieben. Wir werden auch die CSS-Eigenschaften „top“ und „left“ verwenden, um das Div zu verschieben.

var interval = setInterval(function() {
   var div = document.getElementById("movingDiv");
   div.style.top = div.offsetTop + 1 + "px";
   div.style.left = div.offsetLeft + 1 + "px"; },
   1000);

Beispiel

Hier ist der vollständige Arbeitscode dieses Beispiels –

   


   <div id="movingDiv"> This is my moving div! </div>
   <script>
      var interval = setInterval(function() {
      var div = document.getElementById("movingDiv");
      div.style.top = div.offsetTop + 1 + "px";
      div.style.left = div.offsetLeft + 1 + "px"; },
      1000);
   </script>

Zeile für Zeile Erklärung des obigen Codes –

• Zeile 1 – Wir beginnen mit der Erstellung eines HTML-Dokuments.

• Zeile 3 – Wir erstellen ein Kopfelement.

• Zeile 4 – Wir kreieren ein Stilelement. Innerhalb dieses Stilelements platzieren wir unseren CSS-Code.

• Zeile 5 – Wir erstellen eine CSS-Regel für unser Div mit der ID "MoveDiv". Wir stellen den Standort auf ein „relativ“. Wir legen auch die Breite und Höhe des Div fest.

• Zeile 12 − Wir erstellen ein Body-Element und fügen unseren HTML-Code ein.

• Zeile 13 − Wir erstellen ein Div mit der ID „movingDiv“. . In dieses Div fügen wir etwas Text ein.

• Zeile 14 − Wir erstellen ein Skriptelement und fügen unseren JavaScript-Code ein.

• Zeile 15 − Wir erstellen eine Variable namens „interval“. Wir setzen diese Variable auf die Funktion setInterval. Diese Funktion verschiebt unser Div alle 1000 Millisekunden (1 Sekunde). Zeile 16

  − Wir erstellen eine Variable namens „div“. Wir setzen diese Variable auf das HTML-Element mit der ID „
movingDiv
• “.

  Zeile 17

  – Wir verwenden die CSS-Eigenschaft „
top
• “. um unser Div um 1 Pixel nach unten zu verschieben.

  Zeile 18

  − Wir verwenden die CSS-Eigenschaft „
left
• “, um unser Div um 1 Pixel nach rechts zu verschieben.

  Zeile 22

  − Wir beenden unseren HTML-Code Dokument.

• In diesem Tutorial haben wir besprochen, wie man mit JavaScript ein bewegliches Div erstellt. Wir haben angefangen Durch das Erstellen von HTML-Code. Dann haben wir etwas CSS-Code erstellt. Schließlich haben wir einige erstellt JavaScript-Code.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein bewegliches Div mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!