javascript 雪花飘落效果
(2011-12-22 21:02:14)
标签:
javascript雪花仿googleletitsnow兼容风吹settimeoutsetinterval |
分类: Javascript |
前几天看到一条微博,说在google上打let it snow会有下雪以及霜冻效果,觉得很有创意,所以今天趁冬至自己写了一个,当然没有google写的那么多样化那么细致,另外百度出一些雪花飘落的效果,其中这个是很赞的《SnowStorm》,雪花飘落到浏览器下方的时候会堆积一段时间,然后抖一抖就消失了。而我的只是简单的写了一个随机的雪花飘落,感兴趣的话可以打开这个链接下载页面:《雪花飘落效果》
为方便下载,提供本人网盘帐号密码,请不要弄乱里面的页面,以方便其它人下载,谢谢。
密码:123456
我稍微解释下里面的几个函数:
1、letItSnow()
就是下雪啦(这句依旧是废)。然后就调用createSnow来产生雪花。
2、createSnow()
产生雪花每个雪花都是一个<i>标签,里面放一个“*”来模拟雪花(google那个copy不下来,居然显示为空格,我了个太阳...),然后放到一个大容器叫snowBox里面,产生的个体push进iArray里面收集起来。雪花采用的是以snowBox为参照的绝对定位方式,top为0px,left就用Math.random()*window.screen.width,让雪花随机在屏幕宽度中产生。
用color来控制雪花的颜色深浅产生景深,范围在0~200之间
用fontSize来控制雪花的大小,范围在10px~15px之间
用time来控制雪花飘落的调用间隔,范围在40ms~50ms之间
用snowInterval来控制雪花产生的间隔,范围在500ms~1000ms之间
然后递归调用本身,不停产生雪花。
3、fallDown()
顾名思义就是让雪花飘落,飘落速度speed为2px,即每次纵向下降2px。这个时候做一个检测,如果雪花下降到固定高度下,即比父容器还高,那么就remove掉它,这样可以减轻浏览器的压力,要不然太多雪花会导致浏览器越走越慢,反正已经给overflow:hidden掉看不见了,眼不见为净。然后在纵向下降的同时调用个windBlow函数,让雪花下降的艺术些。
4、windBlow()
一个命名貌似风吹,其实真是风吹的效果(这话更废.哈哈.),利用一个Math.sin()来产生雪花在空中迂回飘荡的效果,这样雪花就不会单调的直线下降,而是蛇形飘落,控制好飘落的间隔,这样连续性比较好,看起来也舒服些。
5、其它
效果IE,FF,chrome等浏览器都支持,而且测试过,目前没有发现bug,如果你在使用中发现bug,请在博文下留言,或者加我QQ,谢谢...祝大家冬至快乐...