js特效,让你的网站下起雪
<div id="cnblogs_post_body">js特效,让你的网站下起雪作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing
我依稀记得在去年或是前年做过一个特效,让你的网站下起雨(js特效)也为此写了一篇博文,大家有兴趣的,可以先看下那个.有着异曲同工之妙,但由雪跟雨这个东西还有点不一样.所以我又写下这篇文章.首先,雪是会飘来飘去的,然后它还会下落.这样的话,我们在x轴和y轴都有一个速度.然后Y轴上还有一重力加速度,X轴应该是减速度了.
好,东西已经做好了,我们先看下最终的效果图:
http://images.cnitblog.com/blog/111851/201212/21170938-8a36e5737654453e9bf4f0c5a82f5023.png
看到雪花了没?这个例子是用在端口网上的.它的链接地址是http://www.duankou.com,我不能老是拿我的网站来做实验是吧,所以这次拿了这个社交网站,看着像Facebook吧.哈哈
它的原理是,一个定时器,不是两个,也不是三个,only one;然后,不断的去改变它的位置,这个是很卡的,所以我们雪就不要生成太多,适当的也在超出边界时删除掉节点.
好了,言归正传,来看代码吧:
<div class="cnblogs_code">if (arr){ 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; }
页:
[1]