使用javascript实现雪花飘落的效果
看了javascript网页特效实例大全中的图片飘下的效果实例，觉得值得动手学习下。
就把图片改成雪花图，完成一个雪花飘下的效果。
并且，其中有些内容比较陈旧了，那么就学者改掉吧。
包括：
1.对left和top的操作仅支持IE浏览器，这咋行，必须得支持chrome。
2.控制图片下落的过程还要去检索element，不好吧，那就改成数组维持，直接操作数组中维持的对象，启不更快。
3.向文档中添加元素直接改成通过JS代码创建元素对象的方式。
实现思路：
1.初始化生成10个div，全都采用绝对定位，每个div中放一个雪花图片，设置好宽高，并保存在数组中，便于后面下雪的函数直接操作。
2.初始化每个div的横坐标和纵坐标，总要给雪花一个下落的起始位置吧。
3.初始化为每个雪花都设一个纵向的下落步长，一个横向的摆动步长，这样每个雪花都会以不同的速度下落和摆动。
4.做一个下雪的函数，每10秒调一下该函数，每调一次该函数，就是控制每个雪花在纵向下落一个自身的步长，横向的摆动通过正弦函数算出一个正弦值后乘以幅度，这样雪花下落就是按照正弦波形的方式进行。
图片可以网上随便找。
以下代码兼容IE8+，Chrome。
<BODY>
<SCRIPTLANGUAGE="JavaScript">
//图片的过程中，横坐标的轨迹是以一点为中心的正弦曲线
//利用了setTimeout函数完成了动画的功能
//图片
varsnowsrc="雪花.png"
//雪花个数
varno=10;
//声明变量，xp表示横坐标，yp表示纵坐标>
vardx,xp,yp;
//声明变量，am表示左右摆动的幅度，stx表示横坐标的偏移步长，sty表示纵坐标的步长>
varam,stx,sty;
{
//获取当前窗口的宽度
clientWidth=document.body.clientWidth;
//获取当前窗口的高度
clientHeight=document.body.clientHeight;
}
vardx=newArray();
varxp=newArray();
varyp=newArray();
varam=newArray();
varstx=newArray();
varsty=newArray();
varsnowFlakes=newArray();
for(i=0;i<no;++i){
dx[i]=0;
//第i个图片的横坐标初始值
xp[i]=Math.random()*(clientWidth-50);
yp[i]=Math.random()*clientHeight;//第i个图片的纵坐标初始值
am[i]=Math.random()*20; //第i个图片的左右摆动的幅度
stx[i]=0.02+Math.random()/10;//第i个图片x方向的步长
sty[i]=0.7+Math.random(); //第i个图片y方向的步长
//生成一个容纳雪花图片的div，并设置其绝对坐标
varsnowFlakeDiv=document.createElement('div');
snowFlakeDiv.setAttribute('id','dot'+i);
snowFlakeDiv.style.position='absolute';
snowFlakeDiv.style.top=15;
snowFlakeDiv.style.left=15;
//生成一个雪花图片对象，设置宽高，并加入div
varsnowFlakeImg=document.createElement('img');
snowFlakeImg.setAttribute('src',snowsrc);
snowFlakeImg.style.width=30;
snowFlakeImg.style.height=30;
//将雪花div加入到document中，并通过数组保存
snowFlakeDiv.appendChild(snowFlakeImg);
document.body.appendChild(snowFlakeDiv);
snowFlakes[i]=snowFlakeDiv;
}
functionsnow(){
for(i=0;i<no;++i){
//第i个图片的纵坐标加上步长
yp[i]+=sty[i];
//如果新坐标超过了屏幕下沿，重置该图片的信息，包括横坐标、纵坐标以及x方向的步长和y方向的步长
if(yp[i]>clientHeight-50){
//重新赋值图片的横坐标
xp[i]=Math.random()*(clientWidth-am[i]-30);
//重新赋值图片的纵坐标
yp[i]=0;
}
dx[i]+=stx[i];//dx变量加上一个步长
//直接操作数组中对应的雪花div
varsnowFlakeDiv=snowFlakes[i];
//更新图片的纵坐标
snowFlakeDiv.style.top=yp[i];
//更新图片的横坐标
snowFlakeDiv.style.left=xp[i]+am[i]*Math.sin(dx[i]);
}
//设定动画刷新的时间周期
setTimeout("snow()",10);
}
//调用snowIE()函数
snow();
</script>
</BODY>
以上就是全部代码了，效果还是挺棒的，具体的解释请看注释，这里就不多废话了，希望对大家能有所帮助。