07/09/2018, 15:08

Hoạt ảnh HTML DOM trong JavaScript

Một trang web cơ bản Để chứng minh làm thế nào để tạo ra các hình ảnh động HTML với JavaScript, chúng tôi sẽ sử dụng một trang web đơn giản: <!DOCTYPE html> <html> <body> <h1>My First JavaScript Animation</h1> <div ...

Một trang web cơ bản

Để chứng minh làm thế nào để tạo ra các hình ảnh động HTML với JavaScript, chúng tôi sẽ sử dụng một trang web đơn giản:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id=”animation”>My animation will go here</div>

</body>
</html>

Tạo một vùng chứa hoạt ảnh

Tất cả hoạt ảnh phải liên quan đến phần tử vùng chứa.

<div id =”container”>
<div id =”animate”>My animation will go here</div>
</div>

Định dạng các phần tử

Phần tử container phải được tạo với style = “position: relative”. Các yếu tố hoạt ảnh nên được tạo ra với style = “position: absolute”.

#container {
awidth: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
awidth: 50px;
height: 50px;
position: absolute;
background: red;
}

Mã hoạt ảnh

Hoạt ảnh JavaScript được thực hiện bằng cách lập trình thay đổi dần theo định dạng của một phần tử. Các thay đổi được gọi bởi một bộ đếm thời gian. Khi khoảng thời gian bộ đếm nhỏ, hoạt ảnh sẽ liên tục. Mã cơ bản là:

var id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}

Tạo hoạt ảnh sử dụng JavaScript

function myMove() {
var elem = document.getElementById(“animate”);
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + ‘px’;
elem.style.left = pos + ‘px’;
}
}
}

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0