用射流研究…代码和插件实现博客雪花飘落效果的四种方法

冬天到了，很多的博客空间都加了雪花的效果，于是去看了看他们的效果实现。有好几个效果代码，就拿过来了，有需要的朋友可以拿过去试试看。

雪花大图片：

效果代码一

脚本类型='text/javascript '语言=' JavaScript '(function(){ function k(a，b，c){ if(a . addeventlistener)a . addeventlistener(b，c，false)；else a . attach event a . attach event(' on ' b，c)}函数g(a) {if (typeof window.onload！=' function ')窗口。on load=a；else { var b=window.onloadwindow。onload=function(){ b()；a()} } }函数h(){ var a={ }；对于（键入{Top: ' '，Left: ''}) {var b=type=='Top '？Y ' : ' Xif(窗口类型['page' b 'Offset']！=' undefined ')a[类型。tolowercase()]=window[' page ' b ' Offset ']；else { b=文档。文档元素。客户身高？文件。文档元素：文档。身体；a[type。tolowercase()]=b[' roll ' type]} }返回a }函数l() {var a=document.body，b；if(窗口。内部高度)b=窗户。内部高度；else if(一个. parent元素。客户端高度)b=a .父元素。客户身高；否则，如果(a .客户高度)b=a .客户高度；返回b }函数我(a){这个。父级=文档。身体；this.createEl(this.parent，a)；这个。大小=数学。random()* 5 ^ 5；这个。埃尔。风格。宽度=数学。圆(这个。大小)' px '；这个。埃尔。风格。身高=数学。圆(这个。大小)' px '；这个。MaxLeft=文档。尸体。在中间-这个。大小；这个。MaxTop=文档。尸体。抵消这个重量。大小；这个。左=数学。random()*这个。maxleftthis.top=h().排名前1;这个。角度=1.40.2 *数学。random()；this . minangle=1.4 this . maxangle=1.6 this。角度=0.01 *数学。random()；这个。速度=2数学。random()} var j=false；g(function(){ j=true })；var f=真；window.createSnow=函数(a，b) {if (j) {var c=[]，m=SetInterval(function(){ f b c . length math。random()b * 0.0025 c . push(新I(a))；f！c。长度clearInterval(m)；for (var e=h().顶部，n=l()，d=c .长度-1；d=0；如果(c[d])，如果(c[d]).顶部e || c[d].顶级c[d].尺寸1东(北){c[d].移除();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；电子商务.draw()})} else g(function(){立即创建(a，b)})}；窗户。remove snow=function(){ f=false }；I . prototype={ createel :函数(a，b){ this。El=文档。创建元素(' img ')；this.el.setAttribute('src '，b '雪花图片的绝对链接地址');this.el.style.position='绝对；这个。埃尔。风格。display=' block这个。埃尔。风格。zindex=' 99999这个。父母。appendchild(这个。El)}，移动：函数(){ if(this。倾斜这个角度。这个。倾斜这个角度。maxangle)这个。角度=-这个。角度；这个。角度=这个。角度；这个。左=这个。速度*数学。cos(这个。角度*数学. PI)；速度*数学（角度*数学. PI)；如果(这个。左0)这个。左=这个。maxleft否则如果(这个。留下这个。maxleft)这个。left=0 }，绘制：函数(){ this。埃尔。风格。top=数学。圆(这个。top)' px '；这个。埃尔。风格。左=数学。圆(这个。左)' px ' }，删除：函数(){ this。父母。移除子(这个。El)；这个。家长=这个。El=null } } }))；createSnow('，40)；/script将以上面代码直接复制粘贴到主题中的页眉或者页脚文件中，如果你只想让文章页面显示，那就直接添加到单一的就可以了。下面把雪花图片（所需的素材)提供给大家

小图片：需要大家上传到自己的博客的当前使用的主题中，然后把代码中的链接改成图片所在的位置即可。效果如本页面所示。

效果代码二：

html headscriptfunction start(){ var Array=new Array()；var canvas=document . getelementbyid(' my canvas ')；var context=canvas . getcontext(' 2d ')；for(var I=0；i50I){ var Showson=new Showson()；array . push(show snow)；} time=setInterval(function(){ context . clear rect(0，0，canvas.width，canvas . height)；for(var I=0；iarray.lengthi ){array[i]。move()；数组[i]。绘制(上下文)；}},500);}函数show snow(){ var y=parsent(math . random()* 50)* 10；var x=parsent(math . random()* 80)* 10；this . draw=function(context){ context . font=' 50px Calibri '；context.fillText('*，x，y)；} this . move=function(){ y=20；if(y 600){ y=0；} } }/script/head dyinput type=' button ' value=' start ' onclick=' start()'/br/canvas id=' my canvas ' height=' 600 px ' width=' 600 px ' style=' border : 3px纯蓝'/canvas/。

效果代码三。

其实，让它下雪的插件也可以用来实现WordPress博客中的雪花飘落。

我不会唠叨如何使用let it snow插件，它与其他插件安装没有什么不同。你可以直接下载上传文件夹中的文件让它飘雪到/wp-content/plugins/目录中，然后激活插件，在WordPress的管理面板菜单中设置插件。或者直接在后面的插件库中搜索，也可以找到。

乐雪官网：点击访问。

效果代码四。

我在网上看到一个非常强大的暴雪插件。而且牛逼，好像是谷歌上搜索让它下雪的代码会有雪和霜的效果，很有创意。觉得好的童鞋可以去官网看看。

我在网上找到一个简单的随机雪花飘落效果代码，分享给大家(这个效果是纯代码写的。是雪花。):

解释一下里面的几个功能：

1、letItSnow()

下雪了(这句话还是没用)。然后调用createSnow生成雪花。

2、创建现在()

每一片产生雪花的雪花都是一个I标记，其中放一个“*”来模拟雪花(谷歌的副本下不来，但实际上显示为一个空格，我有一个太阳.)，然后放入一个叫做雪球的大容器中，将产生的个体推入iArray中进行收集。雪花是绝对定位的，以雪球为参照，顶部在0px，左边在math . random()* window . screen . width，这样雪花在屏幕宽度内随机生成。

颜色用来控制雪花的色深产生景深，fontSize用来控制雪花的大小在0 ~ 200范围内，time用来控制雪花的召唤间隔在10px~15px范围内，snowInterval用来控制雪花的间隔在500ms~1000ms范围内。

然后递归调用自身，不断产生雪花。

3、跌倒()

顾名思义就是让雪花落下，下落速度为2px，也就是一次垂直下落2px。这时，做一个测试。如果雪花降到固定高度，也就是比父容器高，那就把它去掉，可以减轻浏览器的压力。否则，过多的雪花会导致浏览器越走越慢。不管怎样，它已经消失在隐藏的上空。然后在垂直下降的同时调用一个windBlow函数，让雪花落得更有艺术感。

4、风流()

一个名字看起来像风吹的，其实是风吹的效果(这个就更没用了。哈哈。)，并用一个Math.sin()产生雪花在空中迂回游走的效果，这样雪花就不会以单调的直线落下，而是以蛇形落下，落下的间隔也控制得很好，连续性更好，看起来也更舒服。

函数letItSnow(){var雪球=document.getElementById('雪球');var IAR ray=new Array()；createSnow(雪球，iArray)；}函数fallDown(temObj，iArray){ var speed=2；var top=ParSeint(TemObj。风格。顶部)；if(top510){//当到超过高度时候就删了它，减轻浏览器压力for(var I=0；iiarray . lengthi){ if(TemObj==iArray[I]){ iArray。拼接(，1)；定义变量雪球=document.getElementById('雪球');雪球。移除子对象(TemObj)；返回false} } } temObj.style.top=top最高速度“px”；var wind=风流(TemObj，顶部)；temobj。风格。left=ParSeint(temobj。风格。左)风* 2 ' px}函数window(TemObj，顶部){ if(parsent(数学。random())% 2==1)返回数学。sin(top/16)；否则返回数学。cos(top/16)；}函数createSnow(雪球，iArray){ var temObj=document。创建元素(' I ')；var temText=文档。createtextnode(' * ')；temobj。append child(TemText)；temobj。风格。left=ParSeint(数学。random()*窗口。屏幕。宽度)' px '；temobj。风格。top=' 0pxvar temNum=parseInt(数学。random()* 200)；temobj。风格。color=' # ' temnum。tostring(16)temnum。tostring(16)temnum。tostring(16)；IAR雷。push(TemObj)；雪球。append child(TemObj)；var temNum=0；while(temNum 10){ temNum=parseInt(数学。random()* 15)；} TemObj。风格。font size=TemNum ' px定义变量时间=0;while(time 40){ time=parsent(数学。random()* 50)；} TemObj。timer=设置间隔(function(){ fall down(TemObj，iArray))；},时间);var雪间隔=0；while(降雪间隔500){降雪间隔=parsent(数学。random()* 1000)；} var createTimer=setTimeout(函数(){立即创建(雪球，iArray)；cleartime out(创建TiMer)；}，降雪间隔)；}演示地址：http://演示。JB 51。net/js/2014/snow/

好了，四个效果代码到此结束。希望能帮到有需要的朋友。如果有什么问题可以在下面留言。