圣诞快乐圣诞快乐为基于jquery的博客增加了浪漫的下雪效果

一年一度的圣诞节又来了。首先祝大家一串串好运，年年健康，永远平安！在这个特殊的日子里，到处都是喜庆的气氛，空中飘落的雪花更是浪漫！今天，我将教你如何在博客中添加雪的效果。今天那里下雪了吗？

首先在页面中引入jQuery库和jQuery.snow.js(或者使用jQuery.snow.min.js的压缩版):复制的代码如下： script src=' http : jQuery . js '/script script src=' http 3360 jQuery . snow . js '/script。博主公园的朋友不用介绍jquery，因为博主。不是博主的朋友也可以引用googlecdn提供的jQuery:复制的代码如下： Script src=' http :3359 Ajax . googleapi.com/Ajax/libs/jQuery/1 . 7 . 2/jQuery . js '/Script src=' http : jQuery . snow . js '/Script然后在页面文档的任何地方调用snow插件：复制代码如下：script $(文档ready(function(){ $ . fn . snow()；});/script还可以根据自己的喜好设置插件提供的参数来调整雪花效果：复制代码如下： minSize /*雪花最小大小，默认值为10 */maxSize /*雪花最小大小，默认值为20 */newOn /*每毫秒雪花出现的频率。默认值为500 */flack color/*雪花色，默认值为白色#FFFFFF */。例如，可以传递以下参数：复制代码如下： $ .fn.snow ({minsize: 5，maxsize: 50，new on3360 1000，flakcolor3360 ' # 0090。newOn参数的值越小，效果越好。但是，如果设置得太小，可能会导致性能问题并消耗资源。最后简单介绍一下雪花效果的要点：使用字符作为雪花，Unicode编码为：所以雪花的大小和颜色控制其实就是设置字体大小和颜色属性。使用setInterval周期性生成雪花，频率由newOn控制。下面是snow插件的完整代码：复制代码如下：(函数($) {$)。fn . snow=function(options){ var $ flare=$(' div id=' flare '/')。CSS ({'position' :' absolute '，' top': '-50px'})。html(“”)，documentHeight=$(文档)。高度()，文档宽度=$(文档)。width()，默认值={ minSize : 10，maxSize : 20，newOn : 500，flakeColor : '#FFFFFF' }，选项=$。extend({}，默认值，选项)；var interval=set interval(function(){ var startPositionLeft=math . random()* document width-100，startOpacity=0.5 Math.random()，sizeFlake=options . minsize math . random()* options . maxsize，endPositionTop=document height-40，endPositionLeft=startPositionLeft-100 math . random()* 200，durationFall=document height * 10 math . random()* 5000；$flake。克隆()。appendTo(“正文”)。CSS({ left : startPositionLeft，opacity: startOpacity，' font-size': sizeFlake，color : options . flake ecolor })。animate({ top : end position top，left: endPositionLeft，opacity: 0.2 }，durationFall，' linear '，function() { $(this)。remove()})；}，options . NewOn)；};})(jQuery)；花园里的朋友只需要添加以下代码到(管理->设置->页脚HTML代码)，不简单！Tips:因为会被转义，在这里的雪花代码加一个空格，记得加html(# 10052；)使用时。)去掉#之间的空格。

复制代码代码如下：脚本（函数($){ $ .fn。雪=函数（选项){var $flake=$('div id='flake' /').css({'position':'absolute '，' top':'-50px'}).html(' # 10052；')，documentHeight=$(文档)。高度(),文档宽度=$(文档)。宽度()，默认值={minSize:10，maxSize:20，newOn:500，flakeColor: ' # FFFFFF ' }，选项=$。扩展({}，默认值，选项);var区间=set区间(function(){ var startPositionLeft=math。random()*文档宽度-100，startOpacity=0.5 Math.random()，sizeFlake=options。明泽数学。random()*选项。maxsize，endPositionTop=文档高度-40，end positionleft=start positionleft-100数学。random()* 200，durationFall=文档高度* 10数学。random()* 5000；$flake.clone().appendTo("正文")。CSS({ left : start position left，opa city 3360 start opacity，' font-size':sizeFlake，color :选项。片状ecolor }).动画({top:endPositionTop，left:endPositionLeft，opacity:0.2 }，durationFall，“linear”，function(){$(this).remove()})；}，选项。NewOn)；};})(jQuery)；$.fn.snow({ minSize: 5，maxSize: 50，newOn: 1000，flake ecolor : ' # FFF ' })；/脚本