Cách tạo: Hiệu ứng động JavaScript HTML
- Trang trước Điểm nhấn ngữ pháp
- Trang tiếp theo Độ dài chuỗi JS
Học cách tạo hiệu ứng động bằng JavaScript.
Một trang web cơ bản
Để minh họa cách tạo hiệu ứng động HTML bằng JavaScript, chúng ta có thể sử dụng một trang web đơn giản.
thực thể
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
cài đặt định dạng của phần tử
Để hiệu ứng động có thể xảy ra, phần tử hiệu ứng động phải được xử lý hiệu ứng động tương đối với một 'bộ chứa cha'.
Phần tử chứa nên sử dụng style="position: relative" tạo
Phần tử hiệu ứng động nên sử dụng style="position: absolute" tạo
thực thể
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
{}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
{}
Mã hiệu ứng động
JavaScript tạo hiệu ứng động bằng cách thay đổi dần định dạng của phần tử.
Những thay đổi này được thực hiện bởi bộ đếm thời gian. Khi khoảng cách giữa các bộ đếm thời gian rất nhỏ, hiệu ứng động trông mượt mà.
Mã cơ bản là:
thực thể
var id = setInterval(frame, 5);
function frame() {
if (/* kiểm tra hoàn thành */) {
clearInterval(id);
}
/* Mã thay đổi định dạng của phần tử */
{}
{}
Tạo hiệu ứng động bằng JavaScript
thực thể
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
}
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
{}
{}
{}
- Trang trước Điểm nhấn ngữ pháp
- Trang tiếp theo Độ dài chuỗi JS
