博客添加浪漫的下雪效果！
一年一度的圣诞节又到了，首先祝大家好运一串串，健康一年年，平安到永远！在这个特殊的日子里，处处洋溢着节日的气氛，空中飘落的雪花更显得浪漫！今天就教大家如何在博客中添加纷纷扬扬的下雪效果。今天，你那里下雪了吗？
首先在页面引入 jQuery 库和 jQuery.snow.js（或者使用压缩版本 jQuery.snow.min.js）：
< script src = "jquery.js" ></ script >
< script src = "jquery.snow.js" ></ script >
博客园的朋友可以不用引入 jQuery，因为博客园自身已经引入了。不是博客园的朋友也可以引用 Goolgle CDN 提供的 jQuery：
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js " ></ script >
< script src = "jquery.snow.js" ></ script >
然后在页面文档的任何地方调用下雪插件就可以了：
< script >
$(document).ready( function(){
$.fn.snow();
});
</ script >
你也可以根据自己的喜好设置插件提供的参数来调整下雪的效果：
minSize /* 雪花的最小尺寸，默认值 10 */
maxSize /* 雪花的最小尺寸，默认值 20 */
newOn /* 每毫秒雪花出现的频率，默认是 500 */
flakeColor /* 雪花的颜色，默认值是白色 #FFFFFF */
例如可以传递下面这样形式的参数：
$.fn.snow({
minSize: 5,
maxSize: 50,
newOn: 1000,
flakeColor: '#0099FF'
});
newOn 参数值越小，效果越好，但是设置过小的话可能会有性能问题，比较耗资源。
最后向大家简单介绍一下这个下雪效果实现的要点：
使用字符 ? 作为雪花，Unicode 编码是：❄，因此雪花的大小和颜色控制其实就是设置 font-size 和 color 属性。 使用 setInterval 周期性生成雪花，频率使用 newOn 控制。下面是下雪插件的完整代码：
园子里的朋友只要把下面代码添加到（管理-》设置-》页脚HTML代码）中就可以了，非简单！
温馨提示：因为会被转义，这里给雪花编码加个空格，使用的时候记得把html('& #10052;') 的& #间空格去掉啊。
< script >
(function($){$.fn.snow=function(options){var $flake=$('< div id = "flake" />').css({'position':'absolute','top':'-50px'}).html('& #10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#FFF' });
</ script >
刷新页面浏览效果 完整源码下载
您可能感兴趣相关文章 2012年度最佳 jQuery 插件隆重揭晓 Web前端开发人员和设计师必读文章 10套精美的免费网站后台管理系统模板 8个惊艳的 HTML5 和 JavaScript 特效 60款很酷的 jQuery 幻灯片演示和下载
本文链接： 圣诞节到了，给博客添加浪漫的下雪效果！
编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
推荐阅读 ◆ 最受欢迎的文章 期待已久的2012年度最佳 jQuery 插件揭晓 Web 前端工程师和设计师必读精华文章推荐 分享10套精美的免费网站后台管理系统模板 分享13套非常精美 Web 应用程序图标素材 12款优秀的Twitter Bootstrap组件和工具 8个非常惊艳的 HTML5 和 JavaScript 特效 35款特别精致的 HTML5 和 CSS3 网页模板 60款值得珍藏的 jQuery 幻灯片演示和下载
分享到： 新浪微博 QQ空间 腾讯微博 人人网 开心网 豆瓣 0
作者： 山边小溪
出处： jizhula.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。
分类: jQuery , 我的博文
标签: jQuery , jQuery下雪插件 , jQuery下雪效果
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息