Mô tả: Hiệu ứng này sẽ hiện lên bảng "Loading..." khi trang web chưa tải về hết, khi đã tải xong trang web, bảng này tự động mất đi và nội dung trang web sẽ hiện lên.
Cài đặt:
Hiệu ứng này khá đơn giản, chỉ cần vài dòng code là bạn có thể dùng được. Bạn có thể dùng hiệu ứng này cho trang web, blog, uCoz website...
Đầu tiên bạn chèn đoạn code sau dưới thẻ <body>
Code
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
document.getElementById("WholePage").style.display="";
}
</script>
<div id="imgLOAD" style="
position:fixed;top:200px;right:500px;border:1px solid gray;padding:10px; background: #e3e2df" align="center">
loading, please wait ...<br/>
<img src="
link ảnh" border=0></div>
<DIV id="WholePage" style="display:none">
- Các thông số sau bạn có thể điều chỉnh theo ý thích của mình:
+ top:200px;right:500px : 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, ta nên chọn các hình động có nền trong suốt.
Sau đây là vài ảnh động "Loading..." cho bạn lựa chọn:
+ 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;
Kế tiếp chèn thêm đoạn này trước thẻ </body>
Vậy là xong, bạn trở lại trang web, nhấn F5 để xem hiệu ứng.
Demo: http://chjp.uCoz.net
Chúc bạn thành công !
Trang chủ
Tin nhắn của bạn(0)
Nội quy
