Web前端下雪特效实现

偶尔的一次看到别人的博客里有下雪的特效感觉特别好看,然后在网上搜了一些下雪特效的代码,习惯的复制粘贴调试。等调试好了之后发现一个问题,那就是用jq 的时候内存会不断的被占用,直到98%甚至99%。从网上查了一下原因,妈的,也看不懂。算了继续寻找代码,之后找到一个不同形式的下雪特效。 这段js代码雪花的效果调用的图片,而之前下雪的效果是通过jq画出来的。 现在贴出我用的特效代码,如果想下载的话可以直接下载我源码里的js。

(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+"snow"+Math.floor(Math.random()\*4)+".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}}})();

再来一张效果图吧。

下雪特效