黑马程序员之javascript学习笔记:雪花飞舞特效

时间:2021-07-31 09:07:02

--------------------------------------------------- 2345王牌技术员联盟2345王牌技术员联盟、期待与您交流!---------------------------------------------------------

在页面中有雪花徐徐飘落的特效。

从页面顶部飘下来用字符模拟出来的雪花,非常逼真。
页面雪花效果一般是利用不断改变图层坐标来实现的。
其坐标算法各有千秋,因此涉及到大量运算及图形操作,随着雪片数目的增加,程序的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>


--------------------------------------------------- 2345王牌技术员联盟2345王牌技术员联盟、期待与您交流!---------------------------------------------------------