js特效,让你的网站下起雪

js特效,让你的网站下起雪

作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

我依稀记得在去年或是前年做过一个特效,让你的网站下起雨(js特效) 也为此写了一篇博文,大家有兴趣的,可以先看下那个.有着异曲同工之妙,但由雪跟雨这个东西还有点不一样.所以我又写下这篇文章.首先,雪是会飘来飘去的,然后它还会下落.这样的话,我们在x轴和y轴都有一个速度.然后Y轴上还有一重力加速度,X轴应该是减速度了.

好,东西已经做好了,我们先看下最终的效果图:

看到雪花了没?这个例子是用在端口网上的.它的链接地址是http://www.duankou.com,我不能老是拿我的网站来做实验是吧,所以这次拿了这个社交网站,看着像Facebook吧.哈哈

它的原理是,一个定时器,不是两个,也不是三个,only one;然后,不断的去改变它的位置,这个是很卡的,所以我们雪就不要生成太多,适当的也在超出边界时删除掉节点.

好了,言归正传,来看代码吧:

if (arr[i]){
                var ofs=$(this).offset();
                var x=parseInt(ofs.left);
                var y =parseInt(ofs.top);
                var vy=parseInt($(this).attr("vy"));
                x +=wind;
                vy *= ay;
                y+= vy;
                $(this).offset({"top":y});
                $(this).offset({"left":x});
                if(y>winHeight){
                    $(this).remove();
                    delete arr[i];
                }    

这就是它的核心代码,没有什么神秘的.我也就不多做解释了.BYE.

它的实例请点击这里  ,我想我的博客园账号要被封了...哈哈