【Merry Christmas】圣诞节,给博客添加浪漫的下雪效果!
一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远!在这个特殊的日子里,处处洋溢着节日的气氛,空中飘落的雪花更显得浪漫!今天就教大家如何在博客中添加纷纷扬扬的下雪效果。今天,你那里下雪了吗?
首先在页面引入 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= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" ></script> <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 控制。
下面是下雪插件的完整代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | ( function ($){ $.fn.snow = function (options){ var $flake = $( '<div id="flake" />' ).css({ 'position' : 'absolute' , 'top' : '-50px' }).html( '❄' ), 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); |
园子里的朋友只要把下面代码添加到(管理-》设置-》页脚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> |
您可能感兴趣相关文章
本文链接:圣诞节到了,给博客添加浪漫的下雪效果!
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
2011-12-25 30幅让人震撼的精美高速摄影作品欣赏
2011-12-25 30款非常漂亮的免费矢量图片素材