Di chuyển đối tượng từ trái sang phải JavaScript

Div là một thành phần trang web có thể được di chuyển trên màn hình hoặc thay đổi vị trí trên màn hình một cách tự động. Vị trí được thay đổi bằng cách điều chỉnh các thuộc tính kiểu bên trái và trên cùng. Tạo div di chuyển bằng JavaScript là một nhiệm vụ tương đối đơn giản. Tất cả những gì cần thiết là một chút mã HTML, CSS và JavaScript. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo div chuyển động bằng JavaScript

Mã HTML

Điều đầu tiên chúng ta cần là một số mã HTML. Chúng ta sẽ tạo một div có id là "movingDiv". Bên trong div này, chúng tôi sẽ đặt một số nội dung. Nội dung này có thể là bất cứ thứ gì bạn muốn, nhưng trong ví dụ này, chúng tôi sẽ chỉ đặt một số văn bản

 This is my moving div! 

Bây giờ chúng ta đã có mã HTML, chúng ta cần một số mã CSS

Mã CSS

Mã CSS là thứ sẽ làm cho div của chúng ta thực sự di chuyển. Chúng tôi sẽ đặt vị trí của div của chúng tôi thành "tương đối". Điều này sẽ cho phép chúng tôi di chuyển div của mình xung quanh bằng JavaScript. Chúng tôi cũng sẽ đặt chiều rộng và chiều cao của div của chúng tôi

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

Bây giờ chúng ta đã có mã HTML và CSS, chúng ta cần một số mã JavaScript

Mã JavaScript

Mã JavaScript là thứ thực sự sẽ khiến div của chúng ta di chuyển. Chúng tôi sẽ sử dụng hàm setInterval để di chuyển div của chúng tôi cứ sau 1000 mili giây [1 giây]. Chúng tôi cũng sẽ sử dụng các thuộc tính CSS "top" và "left" để di chuyển div của chúng tôi xung quanh

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

Ví dụ

Đây là mã làm việc đầy đủ cho ví dụ này -

   


   
 This is my moving div! 
   

Giải thích từng dòng của đoạn mã trên -

• Dòng 1 - Chúng tôi bắt đầu bằng cách tạo một tài liệu HTML

• Dòng 3 - Chúng tôi tạo một phần tử đầu

• Dòng 4 - Chúng tôi tạo một yếu tố phong cách. Bên trong phần tử kiểu này, chúng tôi sẽ đặt mã CSS của chúng tôi

• Dòng 5 - Chúng tôi tạo quy tắc CSS cho div của mình với id là "movingDiv". Chúng tôi đặt vị trí thành "tương đối". Chúng tôi cũng đặt chiều rộng và chiều cao của div

• Dòng 12 - Chúng tôi tạo một phần tử cơ thể. Bên trong phần tử nội dung này, chúng tôi sẽ đặt mã HTML của chúng tôi

• Dòng 13 - Chúng tôi tạo một div có id là "movingDiv". Bên trong div này, chúng tôi đặt một số văn bản

• Dòng 14 - Chúng tôi tạo một phần tử tập lệnh. Bên trong phần tử tập lệnh này, chúng tôi sẽ đặt mã JavaScript của mình

• Dòng 15 - Chúng tôi tạo một biến gọi là "khoảng". Chúng tôi đặt biến này thành hàm setInterval. Hàm này sẽ di chuyển div của chúng ta sau mỗi 1000 mili giây [1 giây]

• Dòng 16 - Chúng tôi tạo một biến gọi là "div". Chúng tôi đặt biến này thành phần tử HTML có id là "movingDiv"

• Dòng 17 - Chúng tôi sử dụng thuộc tính CSS "top" để di chuyển div xuống 1 pixel

• Dòng 18 - Chúng tôi sử dụng thuộc tính CSS "left" để di chuyển div sang phải 1 pixel

• Dòng 22 - Chúng tôi kết thúc tài liệu HTML của mình

Trong hướng dẫn này, chúng ta đã tìm hiểu cách tạo div chuyển động bằng JavaScript. Chúng tôi đã bắt đầu bằng cách tạo một số mã HTML. Sau đó, chúng tôi đã tạo một số mã CSS. Cuối cùng, chúng tôi đã tạo một số mã JavaScript

Trong bài viết này, chúng ta sẽ học cách tạo div HTML chuyển động bằng JavaScript. Div sẽ di chuyển từ trái sang phải bằng HTML, CSS và JavaScript.  

Tiếp cận

1. Chúng ta phải tạo một div HTML và thêm một số CSS vào div bằng cách sử dụng bóng lớp
2. Trong CSS, chúng tôi thêm một số màu nền vào phần thân và cung cấp một số chiều cao, chiều rộng và màu cho div
3. Bây giờ chúng ta sẽ thêm lề trái vào div bằng JavaScript. Vì vậy, nó sẽ di chuyển từ trái sang phải
4. Trong JavaScript, chúng tôi lấy div bằng tên id. Và sau một khoảng thời gian, chúng tôi sẽ thêm lề trái vào div

Mã HTML

HTML