圣诞节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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
Vue中key的作用示例代码详解
Jun 10 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
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
javaScript语法总结
2016/11/25 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
python调用shell的方法
2013/11/20 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python制作填词游戏步骤详解
2019/05/05 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
银行服务感言
2014/03/01 职场文书
小学生操行评语
2014/04/22 职场文书
初中班级口号
2014/06/09 职场文书
教师节联欢会主持词
2015/07/04 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python