标签:
演示效果
http://www.9696e.com/demo/snow/
春节之前新一博客也会一直挂着的。
<script src="http://www.9696e.com/demo/snow/snow.js" type="text/javascript"></script>
1
|
( function (){ var t,e,n,a,o,i,r=[],s=[],u=0;requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame|| function (e){ var n=( new Date).getTime(); var a=Math.max(0,16-(n-u));t=setTimeout( function (){e(n+a)},a);u=n+a};cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||window.oCancelAnimationFrame|| function (){clearTimeout(t)}; function l(){ if (!( this instanceof l)){ throw new Error( "please use new() create instance" ); return } if (m.call( this )== false ){ return } this .status=0; this .start()} function m(){ var t=document.createElement( "canvas" ); this .canvas=t; var e=document.createElement( "x" );e.style.cssText= "pointer-events:auto" ; return !!(t.getContext&&t.getContext( "2d" )&&e.style.pointerEvents=== "auto" )}l.prototype.start= function (){ var t= this ; if ( this .status===1){ return false } this .status=1; this .snowCanvas(); this .createFlakes();requestAnimationFrame(c)};l.prototype.stop= function (){ if ( this .status===2) return ; this .status=2;cancelAnimationFrame()};l.prototype.snowCanvas= function (){ var t= this .canvas;e=window.innerWidth;n=window.innerHeight;t.id= "J_snowfall" ;t.width=e;t.height=n;t.setAttribute( "style" , "position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none;" );document.body.appendChild(t);o=t;i=t.getContext( "2d" );i.strokeStyle= "none" ;window.onresize= function (){e=window.innerWidth;n=window.innerHeight;t.width=e;t.height=n;flakeCount=e*n/6e3;h.createFlakes()}};l.prototype.createFlakes= function (){ var t,n,o,r,u= "#FFF" ,l=[.45,.55,.8,.9,1];r=[40,50,60,80,100]; for ( var m=0;m<5;m++){t=document.createElement( "canvas" );t.width=r[m];t.height=r[m];n=t.getContext( "2d" );n.font=r[m]/2+ "px sumson" ;o=n.createRadialGradient(r[m]/2,r[m]/2,0,r[m]/2,r[m]/2,r[m]/2);o.addColorStop(0,u);o.addColorStop(.1,u);o.addColorStop(.85,f(u,l[m]));o.addColorStop(1,f(u,0));n.fillStyle=o;n.fillText( "*" ,r[m]/2,r[m]/2);s.push(t)}a=i.createLinearGradient(0,0,0,e);d()}; function d(){ var t; var a=(e-940)/2;flakeCount=e*n/6e3; for ( var o=0;o<flakeCount;o++){t=o<flakeCount*.6?0:o<flakeCount*.8?1:o<flakeCount*.9?2:o<flakeCount*.98?3:4; var i=Math.floor(Math.random()*10)>=5?a+940:a; var s=i<940?Math.random()*i:940+a+Math.random()*a;r[o]=[s,Math.random()*n,t]}} function c(t){i.fillStyle=a,i.clearRect(0,0,e,n),i.beginPath(); for ( var o=0;o<flakeCount;o++){ var u=r[o][0]; var l=r[o][1]; var m=s[r[o][2]];i.drawImage(m,u,l)}i.fill();w();requestAnimationFrame(c)} function f(t,e){ var n,a,o;t=t.replace(/^s*#|s*$/g, "" );t.length===3&&(t=t.replace(/([0-9a-fA-F])/g, "$1$1" ));n=parseInt(t.substr(0,2),16);a=parseInt(t.substr(2,2),16);o=parseInt(t.substr(4,2),16); return "rgba(" +n+ ", " +a+ ", " +o+ ", " +e+ ")" } function w(){ var t,a,o,i,s,u,l;p=.01;a=Math.sin(p);l=(e-940)/2; for ( var m=0;m<flakeCount;m++){u=r[m];o=Math.sin(4*p+m);u[1]+=(u[2]/2+(2+o))/2;u[0]+=6*(a+o/2)/(10/u[2]);s=Math.floor(Math.random()*10)>=5?l+940:l;i=s<940?Math.random()*s:940+l+Math.random()*l;u[1]>n&&(u[1]=-20,u[0]=i); if (u[0]>l&&u[0]<940+l||u[0]>e||u[0]<-20){u[0]>e?u[0]=-20:u[0]=e-20}r[m]=u}} var h= new l})(); |
来自:http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.9696e.com%2Farchives%2F1573
标签:
原文地址:http://www.cnblogs.com/welcometothere/p/4185878.html