在页面中有雪花徐徐飘落的特效。
从页面顶部飘下来用字符模拟出来的雪花，非常逼真。
页面雪花效果一般是利用不断改变图层坐标来实现的。
其坐标算法各有千秋，因此涉及到大量运算及图形操作，随着雪片数目的增加，程序的CPU占用将会变得很高，所以因该通过实验，在效果，效率之间做出平衡。
其源代码如下：
<html>
<head>
<title>雪花飞舞</title>
</head>
<body>
<div style = "position:absolute;top:142;left:270;width;189;height:18">
<div style="position;absolute:top:39;left:31;width:189;height:15">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><font size="2"><b>雪花飞舞的感觉怎么样？</b></font></td>
</tr>
</table>
</div>
</div>
<p>
<!-- 从这里开始剪切 -->
<script language = "JavaScript">
<!--
var no=5; //雪片数目
var speed =20; //飘动速度(值越大越慢)
var ns4up=(document.layers)?1:0;//当前浏览器类型，如果是NS则为1
var ie4up=(document.all)?1:0;//当前浏览器类型，如果是IE则为1
var s,x,y,sn,cs;
var a,r,cx,cy;
var i,doc_width=800,doc_height=600;
x=new Array();
y=new Array();
r=new Array();
cx=new Array();
cy=new Array();
s=8; //每次下落的高度，越小越平滑，但是也越慢
if(ns4up){ //以NS兼容方式
doc_width=self.innerWidth; //取页面宽度
doc_height=self.innerHeight; //取页面高度
}
else
if(ie4up){
doc_width=document.body.clientWidth;//取页面宽度
doc_height=document.body.clientHeight;//取页面高度
}
for(i=0;i<no;++i){ //根据前面定义的雪片数目写进相应数目的层
initSnow(); //随机初始化层的坐标
if(ns4up){ //如果浏览器是NS
//用layer作为雪片(星号)的容器
doucument.write("<layer name=\"dot"+i+"\"left=\"1"");
doucument.write("<top=\"1\" visibility=\"show\"><font color=\"red\">");
doucument.write("*</font></layer>");
}
else
if(ie4up){ //如果浏览器是IE
//用div作为雪片的容器
doucument.write("<div id=\"dot"+i+"\" style=\"POSITION:");
doucument.write("<absolute;Z-INDEX:"+i+";VISIBILITY:");
doucument.write("VISIBLE;top:15px;LEFT:15px;\"><font color=\"red\">");
doucument.write("*</font></layer>");
}
}
//初始化雪片，生成随机坐标
function initSnow(){
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 makeSnow(){
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 updateSnow(){
r[i]+=s;
x[i]=r[i]*sn+cx[i];
y[i]=r[i]*cs+cy[i];
}
//在NS浏览器上处理雪片下落的主程序
function SnowdropNS(){
for(i=0;i<no;==i){ //依次处理每片雪花
updateSnow(); //下落
if((x[i]<=1)||(x[i]>=(doc_width-20))||(y[i]>=(doc_height-20))){ //如果超出屏幕范围
makeSnow();
doc_width=self.innerWidth; //更新页面宽度数据
doc_height=self.innerHeight; //更新页面高度数据
}
doucment.layers["dot"+i].top=y[i];//改变层的Y坐标，应用新的位置
doucment.layers["dot"+i].left=x[i];//改变层的X坐标，应用新的位置
}
setTimeout("SnowdropNS()",speed);
}
//在IE浏览器上处理雪片下落的主程序
function SnowdropIE(){
for(i=0;i<no;==i){ //依次处理每片雪花
updateSnow(); //下落
if((x[i]<=1)||(x[i]>=(doc_width-20))||(y[i]>=(doc_height-20))){ //如果超出屏幕范围
makeSnow(); //则调整雪片到新位置上
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("SnowdropIE()",speed); //准备下一次下落过程
}
if(ns4up){ //如果是NS
SnowdropNS(); //调用SnowdropNS使雪片下落
}
else
if(ie4up){ //如果是NS
SnowdropNS();//调用SnowdropN使雪片下落
}
else
if(ie4up){ //如果是NS
SnowdropIE();//调用SnowdropIE使雪片下落
}
-->
</script>
<!-- 剪切到这里结束-->
</body>
</html>
|
|
收藏
淘帖
踩
