Hoạt ảnh HTML DOM trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Hoạt ảnh HTML DOM trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

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 {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 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’;
}
}
}