📄 rain.htm
字号:
<html>
<head>
<title>
雨点效果
</title>
</head>
<body bgcolor="000000">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var no = 25; //雨点数
var speed = 1; //雨点下落速度
var ns4up = (document.layers) ? 1 : 0; //判断浏览器是否是Netscape
var ie4up = (document.all) ? 1 : 0; //判断浏览器是否是IE
var s, x, y, sn, cs;
var a, r, cx, cy;
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;
}
x = new Array(); //雨点的位置横坐标值
y = new Array(); //雨点的位置纵坐标值
r = new Array(); //用来计算雨点位置的一个参数
cx = new Array(); //雨点的横坐标中间值
cy = new Array(); //雨点的纵坐标中间值
s = 8; //用来计算r[i]的一个基数
for (i = 0; i < no; ++ i)
{
initRain();
//Netscape浏览器下的代码，请参看下面的IE情况下的注释
if(ns4up)
{
if(i == 0)
{
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"3333ff\">");
document.write(",</font></layer>");
}
else
{
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"3333ff\">");
document.write(",</font></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;\"><font color=\"3333ff\">");
document.write(",</font></div>");
}
else //设置容器
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"3333ff\">");
//设置另外两种雨点
if(i%3 == 2)
document.write(".</font></div>");
else if(i%3 == 1)
document.write("。</font></div>");
else
document.write(",</font></div>");
}
}
}
//初始化各参数
function initRain()
{
a = 6;
r[i] = 1;
sn = Math.sin(a); //计算雨点位置横坐标的参数
cs = Math.cos(a); //计算雨点位置纵坐标的参数
cx[i] = Math.random() * doc_width + 1; //获得雨点的横坐标值
cy[i] = Math.random() * doc_height + 1;//获得雨点的纵坐标值
x[i] = r[i] * sn + cx[i]; //修正雨点的横坐标值
y[i] = cy[i];
}
//得到下一颗雨滴
function makeRain()
{
//初始化各参数
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1; //初始雨点出现在窗口区头部
x[i] = r[i] * sn + cx[i];//初始化雨点位置的横坐标
y[i] = r[i] * cs + cy[i];//初始化雨点位置的纵坐标
}
//计算雨滴的下一步位置
function updateRain()
{
r[i] += s;//设置下一步位置的一个参数
x[i] = r[i] * sn + cx[i];//雨点下一步位置的横坐标
y[i] = r[i] * cs + cy[i];//雨点下一步位置的纵坐标
}
//Netscape下的下雨效果
function raindropNS()
{
for(i = 0;i < no;++i)
{
updateRain();
if((x[i] <= 1)||(x[i] >= (doc_width - 20))||(y[i] >= (doc_height - 20)))
{
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
//IE下的下雨效果
function raindropIE()
{
for(i = 0;i < no;++i)
{
updateRain(); //计算雨点的下一步位置
if((x[i] <= 1)||(x[i] >= (doc_width - 20))||(y[i] >= (doc_height - 20))) //若该雨点消失在窗口区范围外
{
makeRain();//则显示下一颗雨滴
//获得浏览器窗口区的大小
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
//设置雨点的位置
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);//循环定时器
}
if(ns4up)
{
raindropNS();//调用Netscape下的下雨效果
}
else if(ie4up)
{
raindropIE();//调用IE下的下雨效果
}
// End -->
</script>
</body>
</html> ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -