Bagaimana untuk membuat div bergerak menggunakan JavaScript?

Div mudah alih ialah elemen web yang boleh bergerak secara automatik di sekeliling skrin atau menukar kedudukannya pada skrin. Tukar kedudukan dengan melaraskan sifat gaya kiri dan atas. Mencipta div mudah alih menggunakan JavaScript adalah tugas yang agak mudah. Apa yang diperlukan hanyalah kod HTML, CSS dan JavaScript. Dalam tutorial ini, kami akan menunjukkan kepada anda cara membuat div bergerak menggunakan JavaScript.

Kod HTML

Perkara pertama yang kami perlukan ialah beberapa kod HTML. Kami akan membuat id sebagai "Pindah Div". Di dalam div ini kami akan meletakkan beberapa kandungan. Kandungan ini boleh menjadi apa sahaja daripada anda Mahu, tetapi untuk contoh ini, mari kita tambahkan beberapa teks.

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

Sekarang kita mempunyai kod HTML, kita memerlukan beberapa kod CSS.

Kod CSS

Kod CSS akan menjadikan div kita sebenarnya bergerak. Kami akan menetapkan kedudukan div kepada "saudara mara." Ini akan membolehkan kami mengalihkan div menggunakan JavaScript. Kami juga akan menetapkan Lebar dan ketinggian div.

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

Sekarang kami mempunyai kod HTML dan CSS, kami memerlukan beberapa kod JavaScript.

Kod JavaScript

Kod JavaScript sebenarnya akan membuat pergerakan div kami. Kami akan menggunakan fungsi setInterval untuk menggerakkan div setiap 1000 milisaat (1 saat). Kami juga akan menggunakan sifat CSS "atas" dan "kiri" untuk mengalihkan div.

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

Contoh

Berikut ialah kod kerja lengkap contoh ini -

   


   <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>

Penjelasan baris demi baris bagi kod di atas -

• Baris 1 - Kita mulakan dengan mencipta dokumen HTML.

• Baris 3

  - Kami mencipta elemen kepala.

• Baris 4

  - Kami mencipta elemen gaya. Dalam elemen gaya ini kami akan meletakkan kod CSS kami.

• Baris 5

  - Kami mencipta peraturan CSS untuk div kami dengan id "MoveDiv". Kami menetapkan lokasi kepada "relatif". Kami juga menetapkan lebar dan ketinggian div.

• Baris 12

  − Kami mencipta elemen badan di dalam elemen badan ini, kami akan meletakkan kod HTML kami.

• Baris 13

  − Kami mencipta "div" dengan id. . Di dalam div ini, kami meletakkan beberapa teks.

Baris 14
• − Kami mencipta elemen skrip di dalam elemen skrip ini, kami akan meletakkan kod JavaScript kami.

Baris 15
• − Kami mencipta pembolehubah yang dipanggil "

  interval". Kami menetapkan pembolehubah ini kepada fungsi setInterval. Baris 16 − Kami mencipta pembolehubah yang dipanggil "div". Kami menetapkan pembolehubah ini kepada elemen HTML dengan id "movingDiv".

• Baris 17 − Kami menggunakan CSS "" propertytop untuk memindahkan div kami ke bawah 1 piksel.

• Baris 18 − Kami menggunakan sifat CSS "kiri" untuk mengalihkan div kami ke kanan 1 piksel.

• Kami tamatkan 22 HTML kami document.

  Dalam tutorial ini, kami membincangkan cara mencipta div bergerak menggunakan JavaScript Dengan mencipta beberapa kod HTML. Kemudian kami mencipta beberapa kod CSS. Akhirnya, kami mencipta beberapa kod JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk membuat div bergerak menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!