Trang chủTạo hiệu ứng đèn nhấp nháy với Notepad , CSS, JavaScript
Hướng dẫn tạo hiệu ứng đèn nhấp nháy trên các trang web bằng Notepad , CSS và JavaScript trình bày trong các dịp Noel, năm mới…
Yêu cầu trình đồ tối thiểu:
– HTML, CSS cơ bản
– JavaScript cơ bản
Demo: http://mylop.edu.vn/examples/xmas-lights
Bước 1: Cấu hình HTML
Mở file index.html bằng phần mềm Notepad . Trong phần head của trang web, liên kết tới file style.css:
Tại vị trí bất kỳ trong phần body, chèn đoạn code sau:
Đây chính là Layer dùng để hiển thị đèn nhấp nháy cho trang web.
Bước 2: Cấu hình CSS
Mở file style.css trong Notepad , thêm vào đoạn code sau:
File ảnh light.pngchứa hình ảnh hai cái dây đèn nhấp nháy, class .light1 dùng để lấy phần ảnh phía trên, class .light2 dùng để lấy hình ảnh phía dưới. Kích thước của file ảnh là 956 x 362 px.
Bước 3:Tạo hiệu ứng đèn nhấp nháy bằng JavaScript
Trong phần head của trang web, chèn vào đoạn code JavaScript sau:
Lưu trang web, xem kết quả trên trình duyệt, bạn sẽ thấy đèn nhấp nháy phía trên trang web với chu kỳ là 1 giây (1000 mili giây). Bạn có thể thay đổi con số này theo ý thích để tăng hoặc giảm tốc độ nhấp nháy.
Chúc bạn làm thực hành thành công hiệu ứng đơn giản này.
xmas-lights.zip (210.28KB)
Yêu cầu trình đồ tối thiểu:
– HTML, CSS cơ bản
– JavaScript cơ bản
Demo: http://mylop.edu.vn/examples/xmas-lights
Bước 1: Cấu hình HTML
Mở file index.html bằng phần mềm Notepad . Trong phần head của trang web, liên kết tới file style.css:
<link rel="stylesheet" href="css/style.css">
Tại vị trí bất kỳ trong phần body, chèn đoạn code sau:
<div id="xmas-layer" class="light1"></div>
Đây chính là Layer dùng để hiển thị đèn nhấp nháy cho trang web.
Bước 2: Cấu hình CSS
Mở file style.css trong Notepad , thêm vào đoạn code sau:
#xmas-layer
{
position:absolute;width:956px;height:180px;top:0;left:50%;margin-left:-478px;
}
.light1{background:url('../images/light.png')no-repeat00;
}
.light2{background:url('../images/light.png')no-repeat0-180px;}
{
position:absolute;width:956px;height:180px;top:0;left:50%;margin-left:-478px;
}
.light1{background:url('../images/light.png')no-repeat00;
}
.light2{background:url('../images/light.png')no-repeat0-180px;}
File ảnh light.pngchứa hình ảnh hai cái dây đèn nhấp nháy, class .light1 dùng để lấy phần ảnh phía trên, class .light2 dùng để lấy hình ảnh phía dưới. Kích thước của file ảnh là 956 x 362 px.
Bước 3:Tạo hiệu ứng đèn nhấp nháy bằng JavaScript
Trong phần head của trang web, chèn vào đoạn code JavaScript sau:
var iTimerId = setInterval(change_light,1000);
var iIndex =1;function change_light()
{
if(iIndex ==1)
{
iIndex =2; document.getElementById("xmas-layer").className="light1";
}
else{ iIndex =1; document.getElementById("xmas-layer").className="light2";
}
}
var iIndex =1;function change_light()
{
if(iIndex ==1)
{
iIndex =2; document.getElementById("xmas-layer").className="light1";
}
else{ iIndex =1; document.getElementById("xmas-layer").className="light2";
}
}
Lưu trang web, xem kết quả trên trình duyệt, bạn sẽ thấy đèn nhấp nháy phía trên trang web với chu kỳ là 1 giây (1000 mili giây). Bạn có thể thay đổi con số này theo ý thích để tăng hoặc giảm tốc độ nhấp nháy.
Chúc bạn làm thực hành thành công hiệu ứng đơn giản này.
xmas-lights.zip (210.28KB)