这是一个jQuery下雪特效。
特效的代码如下:

<style>
body{background:black;color:white}
</style>
<script>
/**
* js网页雪花效果jquery插件 
* 柯乐义 keleyi.com 整理
* http://keleyi.com/a/e8t7hoj4.htm
*/
(function($){

$.fn.snow = function(options){

var $flake = $('<div id="snowbox-k'+'eleyi-com" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出现的频率
flakeColor : "#FFFFFF" //柯乐义 keleyi.com 整理
},
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() * 500,
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);</script>

<script>
$(function(){
$.fn.snow({ 
minSize: 5, //雪花的最小尺寸
maxSize: 50, //雪花的最大尺寸
newOn: 300 //雪花出现的频率 这个数值越小雪花越多
});
});
</script>

JQ_下雪特效的更多相关文章

  1. 给你的WordPress站点添加下雪特效

    今天看到这个教程,感觉挺应景的,就自己尝试了下,效果还行,没截GIF图 方法: 该js文件已支持https,同时已将其及相关雪花图片进行CDN加速处理,可直接调用. 找到WordPress主题的foo ...

  2. HTML页面下雪特效

    1. [代码][HTML]代码     <a  href="javascript:void(function(){var d = document,a = 'setAttribute' ...

  3. 纯css实现下雪特效

    //------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...

  4. js实现下雪雪花特效

    两种下雪特效: 1. <script type="text/javascript"> (function($){ $.fn.snow = function(option ...

  5. canvas雪花特效-jQuery插件实现

    这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...

  6. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  7. 壹度DIY_微信小程序组件_小程序插件开发

    开源免费插件,diy特有的页面机制,搭配30+自定义组件,让你的站点每一个页面都可以完全自定义,可无缝对接任意小程序,如有疑问加入qq壹度小程序交流群:302866773:或wx:liu2417301 ...

  8. cocos2dx基础篇(23) 粒子系统CCParticleSystem

    [3.x]     (1)去掉"CC"     (2)粒子位置模式 tPositionType 改为强枚举类型 ParticleSystem::PositionType:: // ...

  9. VisualEffectGraph概述

    Visual Effect Graph 由来: Visual Effect Graph 是2018.3 以后版本,出的新的粒子特效技术.它是用显卡渲染特效,区别于传统的Patical system 的 ...

随机推荐

  1. js fetch处理异步请求

    以往一直认为异步请求只能使用原生js的XMLHttpRequest或jQuery的$.ajax().$.post()等框架封装的异步请求方法 原来js还提供fetch来替代XMLHttpRequest ...

  2. MySQL基础之 支持的数据类型

    MySQL的数值类型 整数类型 字节 有符号 无符号 TINYINT 1 -128~+127 0~255 SAMLLINT 2 -32768~+32767 0~65535 MEDIUMINT 3 -8 ...

  3. Mysql学习第三天

    mysqldump -u root -p booksdb > C:/backup/booksdb_20180316.sql # 使用mysqldump命令备份数据库中的所有表 mysqldump ...

  4. Alpha冲刺报告(10/12)(麻瓜制造者)

    今日已完成 邓弘立: 实现了登录的所有功能 符天愉: 有点事没有参与冲刺- 江郑: 刘双玉: 写商品下架接口说明的时候,就发现一个bug,因为私人原因中间离开了很长时间,最后修改完成就很晚了. 困难: ...

  5. 团队作业——Alpha冲刺 9/12

    团队作业--Alpha冲刺 冲刺任务安排 杨光海天 今日任务:修复编辑界面与弹窗界面合并中出现的BUG 明日任务:希望完成编辑界面所有接口交互的功能 郭剑南 今日任务:优化图像预处理所有功能的函数代码 ...

  6. 第二次项目冲刺(Beta版本)2017/12/8

    一.任务分布 二.燃尽图 三.站立式会议 1.照片(就要传了) 2.任务安排 四.总结 这次吸收了上次的教训,将任务进行更加详细的分布,分工更加明确,果然效率就高多了,哈哈哈.

  7. BZOJ5092:[Lydsy1711月赛]分割序列(贪心,高维前缀和)

    Description 对于一个长度为n的非负整数序列b_1,b_2,...,b_n,定义这个序列的能量为:f(b)=max{i=0,1,...,n}((b_1 xor b_2 xor...xor b ...

  8. 构造方法,this关键字,static关键字,封装

    1.构造方法 定义:构造方法是指实例化对象的方法 语法:[修饰符]  类名(参数){    } 根据有无参数分为有参构造和无参构造 1)有参构造 语法:[修饰符]  类名(type 实例变量,int ...

  9. 2.2.1 LinearLayout(线性布局)

    本节引言 本节开始讲Android中的布局,Android中有六大布局,分别是: LinearLayout(线性布局), RelativeLayout(相对布局), TableLayout(表格布局) ...

  10. Block abstraction view(Create & Reference)

    在hierarchical design 中,一般需要调用 hard macro,top调用 macro 的方法有多种: 1. 调用macro对应的db 2. 调用 macro 的 ilm 模型(20 ...