JavaScript dành cho các bạn học thiết kế Web
CDDLT 26.10.2005 21:49:56 (permalink)
JavaScript tạo hình những bông tuyết rơi trên nền trang Web

Bạn muốn tạo một trang Web có hình những hoa tuyết từ từ rơi xuống. Rất dễ dàng. Trước hết bạn dùng các chương trình đồ hoạ để tạo hình một bông tuyết trắng (nhỏ xíu thôi), đặt tên nó là idcs.gif (hay tên gì tùy bạn, nhưng bạn phải sửa tên tập tin hình đó trong đoạn code dưới đây) đặt cùng folder với trang Web của bạn. Sau đó chèn đoạn code phía dưới vào giữa thẻ <body> ... <\body> trong trang Web của bạn.
(Chú ý : nếu bạn tạo hình bông tuyết trắng, nên dùng nền trang web màu đen mới dễ thấy và đẹp)
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var no = 50; // Số bông tuyết
var speed = 14; // Số càng nhỏ tuyết rơi tốc độ càng nhanh
var snowflake = "idcs.gif"; // tập tin hình bông tuyết
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // tọa độ và những vị trí thay đổi
var am, stx, sty; // Ðộ rộng và bước thay đổi
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx = 0; // những biến đổi tọa độ của tập hợp
xp = Math.random()*(doc_width-50); // tập hợp những thay đổi vị trí
yp = Math.random()*doc_height;
am = Math.random()*20; // tập hợp những thay đổi độ rộng
stx = 0.02 + Math.random()/10; // tập hợp những thay đổi bước
sty = 0.7 + Math.random();
if (ns4up) { // những lớp tập hợp
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // hàm Nescape script chính
for (i = 0; i < no; ++ i) { // vòng lặp cho mỗi điểm
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx += stx;
document.layers["dot"+i].top = yp;
document.layers["dot"+i].left = xp + am*Math.sin(dx);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // hàm IE script chính
for (i = 0; i < no; ++ i) { // vòng lặp cho mỗi điểm
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx += stx;
document.all["dot"+i].style.pixelTop = yp;
document.all["dot"+i].style.pixelLeft = xp + am*Math.sin(dx);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
Bạn sẽ có một trang Web hết sức ấn tượng.
Bạn có thể thay hình bông tuyết bằng hình của chính bạn, hay hình một dòng text, hay hình bất kỳ nào đó, tùy theo ý thích của bạn. Miễn là tên tập tin hình đó đúng với tên khai báo trong dòng 5 của đoạn script trên.
Chúc bạn thành công
#1
    Chuyển nhanh đến:

    Thống kê hiện tại

    Hiện đang có 0 thành viên và 1 bạn đọc.
    Kiểu:
    2000-2024 ASPPlayground.NET Forum Version 3.9