网页下雪JS代码

圣诞节了,看到网易的活动页面上有个下雪的特效,就下下来看看,使用的是JS特效,看的比较浅,目前只会简单的使用下,不知道有没有高手能解析下。这里贴出来网页下雪JS代码,如果需要的朋友可以玩玩。

显示样式

正如你在我的博客上看到的,全屏,背景建议不是纯白,否则看不到雪花,你不可能把雪花调彩色吧,哈哈。(好吧,我的博客背景有些白,看的不明显,正考虑要不要调成彩色的,可找了半天没彩色的雪花,如果你有,记得给我个哦,蓝色的就算了,因为我链接的颜色的是蓝色的)

使用方法:

直接复制下面的代码粘贴到你博客页面底部模版。

<script type="text/javascript" language="javascript">

(function(){function k(a,b,c){if(a.addEventListener)a.addEventListener(b,c,false);else a.attachEvent&&a.attachEvent("on"+b,c)}function g(a){if(typeof window.onload!="function")window.onload=a;else{var b=window.onload;window.onload=function(){b();a()}}}function h(){var a={};for(type in{Top:"",Left:""}){var b=type=="Top"?"Y":"X";if(typeof window["page"+b+"Offset"]!="undefined")a[type.toLowerCase()]=window["page"+b+"Offset"];else{b=document.documentElement.clientHeight?document.documentElement:document.body; a[type.toLowerCase()]=b["scroll"+type]}}return a}function l(){var a=document.body,b;if(window.innerHeight)b=window.innerHeight;else if(a.parentElement.clientHeight)b=a.parentElement.clientHeight;else if(a&&a.clientHeight)b=a.clientHeight;return b}function i(a){this.parent=document.body;this.createEl(this.parent,a);this.size=Math.random()*5+5;this.el.style.width=Math.round(this.size)+"px";this.el.style.height=Math.round(this.size)+"px";this.maxLeft=document.body.offsetWidth-this.size;this.maxTop=document.body.offsetHeight- this.size;this.left=Math.random()*this.maxLeft;this.top=h().top+1;this.angle=1.4+0.2*Math.random();this.minAngle=1.4;this.maxAngle=1.6;this.angleDelta=0.01*Math.random();this.speed=2+Math.random()}var j=false;g(function(){j=true});var f=true;window.createSnow=function(a,b){if(j){var c=[],m=setInterval(function(){f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));!f&&!c.length&&clearInterval(m);for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)if(c[d])if(c[d].top<e||c[d].top+c[d].size+1>e+n){c[d].remove(); c[d]=null;c.splice(d,1)}else{c[d].move();c[d].draw()}},40);k(window,"scroll",function(){for(var e=c.length-1;e>=0;e--)c[e].draw()})}else g(function(){createSnow(a,b)})};window.removeSnow=function(){f=false};i.prototype={createEl:function(a,b){this.el=document.createElement("img");this.el.setAttribute("src",b+"http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif");this.el.style.position="absolute";this.el.style.display="block";this.el.style.zIndex="99999";this.parent.appendChild(this.el)},move:function(){if(this.angle< this.minAngle||this.angle>this.maxAngle)this.angleDelta=-this.angleDelta;this.angle+=this.angleDelta;this.left+=this.speed*Math.cos(this.angle*Math.PI);this.top-=this.speed*Math.sin(this.angle*Math.PI);if(this.left<0)this.left=this.maxLeft;else if(this.left>this.maxLeft)this.left=0},draw:function(){this.el.style.top=Math.round(this.top)+"px";this.el.style.left=Math.round(this.left)+"px"},remove:function(){this.parent.removeChild(this.el);this.parent=this.el=null}}})();

createSnow("", 80);

</script>

注意看下最后一句话,上面的是函数,打乱了,createSnow(“”, 80);就是调用上面的函数,共2个参数,第二个参数就是密度,简单点就是页面上显示多少个雪花,切记不要调的太高,不然可能导致硬件不好的电脑卡死;第一个我也不知道是干嘛的,JS我了解的也不是很多,随便给个值的话,雪花图片被修改了,可给定雪花地址,显示依然出错,望高手解析。

或者直接在页面模版末尾添加下面的代码

<script type="text/javascript" src="http://hd3.mail.163.com/christmas/js/snow.js"></script>
<script language="javascript">
createSnow("", 800);
</script>

注意的地方

1. JS中指定了雪花图片的链接,记得修改为自己的雪花图片哦,否则人家图片地址换了,就没了。

2. 记得放在</body>前面,避免JS的下载影响了前面正文内容的下载,这样做基本上可以实现页面已经加载完成,雪花才开始飘。

3. 不知道怎么在模版里面添加?以WP为例,后台-外观-编辑-右侧选择“底部(footer.php)”-看到</body>没?就在之前回车,在空行上直接添加调用snow.js,也可以直接把上面最长的代码复制上去。

4. 删除的方法:请参照3,但要求倒着操作。

相关资料

JS来自页面:http://quan.163.com/activity/index.do

JS链接地址:http://hd3.mail.163.com/christmas/js/snow.js(这里只是JS的函数,需要createSnow(“”, 800);来调用)

雪花图标:http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif(如果修改请在上面的JS上直接替换就行,建议绝对地址)

jucelin雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow.gif(圣诞节过后会撤掉)

蓝色的雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow_blue.png(适合博客背景色为纯白色的)

圣诞节快到了,jucelin提前恭祝各位我认识的、认识我的、以及不认识的天天发财,身体倍棒。

本文固定链接: https://jucelin.com/snow-js.html | Jucelin

该日志由 jucelin 于2012年01月13日发表在 前端设计, 实验室 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 网页下雪JS代码 | Jucelin
关键字: , , , ,

网页下雪JS代码:沙发还在为你留着呢!!

发表评论

您必须 [ 登录 ] 才能发表留言!

更多