Hopsech Blog: Tạo hiệu ứng “mưa tuyết” bằng JavaScript

Thứ Sáu, 24 tháng 7, 2009

Tạo hiệu ứng “mưa tuyết” bằng JavaScript

24.07.2009

Tạo “mưa tuyết” bằng JavaScript

Bạn muốn
thấy cảnh mưa tuyết rơi rơi trên trang Web của mình? Xin mời bạn “xắn
tay áo” và gõ vào máy đoạn mã JavaScript sau đây (bạn nhớ lưu thành dạng
văn bản có phần mở rộng là .html). Các bông tuyết được vẽ bằng công cụ
Airbrush trong Microsoft Paint, kích thước 10x10 pixel, lưu thành tập
tin blue_snow.gif. Chương trình có thể chạy được trên cả Internet
Explorer 4.0 và Netscape Navigator 4.0 trở lên.

PHP Code:

<html> 

<head> <title> Mua tuyet </title> </head> 

<body> <center> 

<SCRIPT LANGUAGE="JavaScript1.2"> 

<!-- Begin 

var no = 25; var speed = 10;  

var snowflake = "blue_snow.gif";  

var ns4up = (document.layers) ? 1 : 0;  

var ie4up = (document.all) ? 1 : 0; 

var dx, xp, yp; var am, stx, sty;  

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[i] = 0;  

xp[i] = Math.random()*(doc_width-50);  

yp[i] = Math.random()*doc_height; 

am[i] = Math.random()*20;  

stx[i] = 0.02 + Math.random()/10;  

sty[i] = 0.7 + Math.random();  

if (ns4up) {  

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() {  

for (i = 0; i < no; ++ i) {  

yp[i] += sty[i]; 

if (yp[i] > doc_height-50) { 

xp[i] = Math.random()*(doc_width-am[i]-30); 

yp[i] = 0; 

stx[i] = 0.02 + Math.random()/10; 

sty[i] = 0.7 + Math.random(); 

doc_width = self.innerWidth; 

doc_height = self.innerHeight; 

} 

dx[i] += stx[i]; 

document.layers["dot"+i].top = yp[i]; 

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); 

} 

setTimeout("snowNS()", speed); 

} 

function snowIE() {  

for (i = 0; i < no; ++ i) {  

yp[i] += sty[i]; 

if (yp[i] > doc_height-50) { 

xp[i] = Math.random()*(doc_width-am[i]-30); 

yp[i] = 0; 

stx[i] = 0.02 + Math.random()/10; 

sty[i] = 0.7 + Math.random(); 

doc_width = document.body.clientWidth; 

doc_height = document.body.clientHeight; 

} 

dx[i] += stx[i]; 

document.all["dot"+i].style.pixelTop = yp[i]; 

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); 

} 

setTimeout("snowIE()", speed); 

} 

if (ns4up) { 

snowNS(); 

} else if (ie4up) { 

snowIE(); 

} 

// End --> 

</script> </body> 

</html>