加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

javascript 雪花飘落效果

(2011-12-22 21:02:14)
标签:

javascript

雪花

仿google

letitsnow

兼容

风吹

settimeout

setinterval

分类: Javascript

前几天看到一条微博,说在google上打let it snow会有下雪以及霜冻效果,觉得很有创意,所以今天趁冬至自己写了一个,当然没有google写的那么多样化那么细致,另外百度出一些雪花飘落的效果,其中这个是很赞的《SnowStorm》,雪花飘落到浏览器下方的时候会堆积一段时间,然后抖一抖就消失了。而我的只是简单的写了一个随机的雪花飘落,感兴趣的话可以打开这个链接下载页面:《雪花飘落效果

为方便下载,提供本人网盘帐号密码,请不要弄乱里面的页面,以方便其它人下载,谢谢。

帐号:287019674@qq.com

密码: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,谢谢...祝大家冬至快乐...

 

 

 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有