Tạo hiệu ứng "Loading..." cho BlOg - cực kì đơn giản
Thứ Bảy, 16 tháng 5, 2009
[FD's BlOg] - Mình đã từng biết tới vài thủ thuật tạo hiệu ứng loading cho web(blog), với javascript, và nó hơi phức tạp một chút, có thể sẽ làm blog của bạn chậm. Nhưng với thủ thuật này bạn sẽ không lo về điều đó.
Xem hình mình họa:
Tuy thủ thuật có sử dụng javascript, nhưng nó chỉ gói gọn trong có 3 câu lệnh. Thủ thuật này ứng dụng hình động để tạo hiệu ứng. do đó để thực hiện thủ thuật nhỏ này bạn phải có một tấm hình động, có thể tham khảo các hình bên dưới:
Đầu tiên, bạn vào bảng điều khiển » vào bố cục » vào chỉnh sửa code HTML, và chèn đọan code javascript bên dưới vào lên trên dòng </head>
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>
Save template lại.
Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:
<div id="imgLOAD" style="position:fixed;top:50px;right:200px" align="right">
Đang tải...<br/>
<img src="link ảnh"/></div>
- chú ý:
+ top:50px;right:200px : Hãy điều chỉnh 2 thông số này để ảnh có vị trí thích hợp trên blog của bạn.
+ link ảnh : link ảnh động, tương tự ảnh mình đưa. Ta nên chọn các hình động có nền trong suốt.
+ position:fixed; : lệnh này dùng để cố định vị trí của ảnh trên màn hình(di chuyển theo khi rê chuột lên hoặc xuống), nếu muốn ảnh nằm ở một vị trí nào đó trên blog của bạn (tức là không di chuyển theo chuột) thì bạn đổi lại thành lệnh : position:absolute;
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét