圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现


Posted in Javascript onDecember 27, 2012

一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远!在这个特殊的日子里,处处洋溢着节日的气氛,空中飘落的雪花更显得浪漫!今天就教大家如何在博客中添加纷纷扬扬的下雪效果。今天,你那里下雪了吗?
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
首先在页面引入 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 控制。

下面是下雪插件的完整代码

(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;') 的& #间空格去掉啊。

<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>

圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Javascript 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
Angular6笔记之封装http的示例代码
Jul 27 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 #Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 #Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 #Javascript
ie支持function.bind()方法实现代码
Dec 27 #Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 #Javascript
多个js与css文件的合并方法详细说明
Dec 26 #Javascript
JS打开图片另存为对话框实现代码
Dec 26 #Javascript
You might like
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
npm的lock机制解析
2019/06/20 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python 基础知识之字符串处理
2017/01/06 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
高三学生评语大全
2014/04/25 职场文书
护士2014年终工作总结
2014/11/11 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
感恩教育主题班会
2015/08/12 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS