1 Sript đổi màu background khá hay
Thứ Sáu, 31 tháng 7, 2009
[FD's BlOg] - Bài này mình sẽ giới thiệu cho các bạn 1 đoạn script nhỏ làm thay đổi màu nền của blog. Với đoạn script này, màu nền sẽ tự động thay đổi 1 cách tuần tự sau 1 khoảng thời gian mà chúng ta đã định trước. Để tạo nên hiệu hứng đổi màu cho đẹp và liên tục, các bạn sẽ tạo 1 mảng các trị màu thay đổi 1 cách tuần tự.
Để thực hiện thủ thuật này, các bạn chỉ cần chèn đoạn code JS bên dưới vào trước thẻ đóng </head> hoặc sau thẻ mở <head>
<script type="text/javascript">
var c = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");
x = 0;
function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 16)
{
clearInterval(change_bg);
}
}
change_bg = setInterval("bg_eff()", 300);
</script>
- Các code màu xanh : 16 là số phần tử của mảng, 300 là thời gian delay giữa các lần đổi màu
- Chú ý đoạn code này : col_val = "#56" + c[x] +"00"; : đây là code tạo trị màu nền theo các phần tử trong mảng c , ví dụ khi x = 2 ta sẽ có màu nền là #562200.
- Ngoài ra bạn có thể chỉnh đoạn code trên lại như thế này : col_val = "#5600" + c[x] ; tức là trị màu sẽ thay đổi ở 2 bit cuối. ví dụ khi x=2 ta sẽ có màu nền là #560022
- Nếu muốn màu thay đổi nhiều hơn nưa thì các bạn cứ việc thêm phần tử vào mảng c. Ví dụ ta có 20 màu sẽ được thay đổi như bên dưới:
<script type="text/javascript">
var c = new Array("00", "10", "15", "20", "25", "30",
"35", "40", "45", "50","55", "60", "65", "70", "75", "80", "85", "90", "95", "AA");
x = 0;
function bg_eff()
{
col_val = "#56" + c[x] +"00";
document.bgColor=col_val;
x++;
if (x == 20)
{
clearInterval(change_bg);
}
}
change_bg = setInterval("bg_eff()", 300);
</script>
- Hãy tạo cho mình 1 list màu để việc thay đổi trong cho đẹp mắt.
Chúc các bạn thành công.
- [ Yêu cầu ] chỉ hiển thị tiện ích với quản trị blog
- Tạo hiệu ứng mô tả cho link liên kết - Sử dụng Javascript
- Tạo buttom nhảy lên, xuống hoặc vào giữa trang với lệnh javascript:scroll
- Ẩn hiện field sọan thảo với việc nhấp chọn nào nút Radio
- Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
- Thay đổi tốc độ chạy chữ (ảnh) bằng cách rê chuột (Javascript)
- Ảnh rõ hơn khi rê chuột vào, một ứng dụng của Javascript
- Tạo các Tab nội dung
- JS : 1 ví dụ về lệnh OnMouseMove (phần 2)
- JS : Tạo 1 pop-up khi load trang web
- JS : 1 ví dụ về lệnh onmouseover trong JavaScript
- Giải pháp Blogger bị chặn 02/07/2012
Comments[ 0 ]
Đăng nhận xét