一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远!在这个特殊的日子里,处处洋溢着节日的气氛,空中飘落的雪花更显得浪漫!今天就教大家如何在博客中添加纷纷扬扬的下雪效果。今天,你那里下雪了吗?
首先在页面引入 jQuery 库和 jQuery.snow.js(或者使用压缩版本 jQuery.snow.min.js):
1
2
|
< script src = "jquery.js" ></ script > < script src = "jquery.snow.js" ></ script > |
博客园的朋友可以不用引入 jQuery,因为博客园自身已经引入了。不是博客园的朋友也可以引用 Goolgle CDN 提供的 jQuery:
1
2
|
< script src = "jquery.snow.js" ></ script > |
然后在页面文档的任何地方调用下雪插件就可以了:
1
2
3
4
5
|
< script > $(document).ready( function(){ $.fn.snow(); }); </ script > |
你也可以根据自己的喜好设置插件提供的参数来调整下雪的效果:
1
2
3
4
|
minSize /* 雪花的最小尺寸,默认值 10 */ maxSize /* 雪花的最小尺寸,默认值 20 */ newOn /* 每毫秒雪花出现的频率,默认是 500 */ flakeColor /* 雪花的颜色,默认值是白色 #FFFFFF */ |
例如可以传递下面这样形式的参数:
1
2
3
4
5
6
|
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' }); |
newOn 参数值越小,效果越好,但是设置过小的话可能会有性能问题,比较耗资源。
最后向大家简单介绍一下这个下雪效果实现的要点:
- 使用字符 ❄ 作为雪花,Unicode 编码是:❄,因此雪花的大小和颜色控制其实就是设置 font-size 和 color 属性。
- 使用 setInterval 周期性生成雪花,频率使用 newOn 控制。
下面是下雪插件的完整代码:
园子里的朋友只要把下面代码添加到(管理-》设置-》页脚HTML代码)中就可以了,非简单!
温馨提示:因为会被转义,这里给雪花编码加个空格,使用的时候记得把html('& #10052;') 的& #间空格去掉啊。
1
2
3
4
|
< 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 > |
您可能感兴趣相关文章
本文链接:圣诞节到了,给博客添加浪漫的下雪效果!
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源