JavaScript HTML DOM động

học cách tạo động hình HTML bằng JavaScript.

trang cơ bản

Để minh họa cách tạo động hình HTML thông qua JavaScript, chúng ta sẽ sử dụng một trang web đơn giản:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<h1>động hình JavaScript đầu tiên của tôi</h1>
<div id="animation">động hình của tôi sẽ được đặt ở đây.</div>
</body>
</html>

tạo phần tử chứa động hình

tất cả các động hình nên liên kết với phần tử chứa.

Ví dụ

<div id ="container">
    <div id ="animate">động hình của tôi sẽ được đặt ở đây.</div>
</div>

thêm phong cách cho phần tử

đ應該 thông qua style = "position: relative" tạo phần tử chứa.

đ應該 thông qua style = "position: absolute" tạo phần tử động hình.

Ví dụ

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

Thử ngay

Mã animation

Animation JavaScript được hoàn thành bằng cách lập trình thay đổi dần phong cách phần tử.

Sự thay đổi này được gọi bằng một bộ đếm. Khi bộ đếm có khoảng cách rất nhỏ, animation trông như mượt mà.

Mã cơ bản là:

Ví dụ

var id = setInterval(frame, 5);
function frame() {
    if (/* Kiểm tra xem có hoàn thành hay không */) {
        clearInterval(id);
    } else {
         /* Mã thay đổi phong cách phần tử */
    }
}

Tạo animation bằng JavaScript

Ví dụ

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'; 
        }
     }
}

Thử ngay