插件使用十分简单，代码已经放至我的GitHub，大家可以下载以及使用或者更新改进代码。

HTML代码源码：

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>jQuery雪花背景插件演示--ZhongDM</title>
     <link rel="stylesheet" type="text/css" href="CreateSnow.css">
     <style type="text/css">
         *{
             margin: 0px;
             padding: 0px;
             overflow: hidden;
         }
         body{
             background-color: blue;       //You can select another color or background
         }
         div{
             margin: 20% auto;
             width: 50%;
             height: 60%;
         }
     </style>
 </head>
 <body>
 <div><font size="7" color="white">Snow Background</font><br><a href="https://github.com/zhongdeming428/jQueryPlugins/tree/master/CreateSnow">click me to clone the github source code and make some differences</a></div>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script src="CreateSnow.js"></script>
 <script type="text/javascript">
     $(function(){
         $('body').createSnows();
     });
 </script>
 </body>
 </html>

CSS代码源码：

 .forImg{
     position: absolute;
     top: 0px;
     animation: snowFly 5s;
     animation-delay: 1s;
     animation-duration: 5s;
     -webkit-animation:snowFly 5s;
     -webkit-animation-delay: 1s;
     -webkit-animation-duration: 5s;
     animation-fill-mode: forwards;
 }
 @keyframes snowFly
 {
 ;}
 ;}
 }
 @-webkit-keyframes snowFly{
 ;}
 ;}
 }

JavaScript代码源码：

 //生成指定区间内的随机整数
 function randomInteger(low, high){
     return low + Math.floor(Math.random() * (high - low));
 }

 //生成指定区间内的随机浮点数
 function randomFloat(low, high){
     return low + Math.random() * (high - low);
 }

 //生成指定的百分数
 function percentNum(num){
     return num.toString() + "%";
 }

 $.fn.createSnows = function(){
     $that = $(this);
     function createSnow(){           //制造一片雪花
                  var randomInt = randomInteger(0,3);
         var randomNum = randomFloat(0,100);
         var imgObjStr = "<img id='img_"+ randomInt.toString() +"'>";
         var $imgObj = $(imgObjStr);
         $that.append($imgObj);
         $imgObj.attr('src',imgArr[randomInt])
         .css({'left':percentNum(randomNum)})
         .addClass('forImg');
     }
     setInterval(function(){
             createSnow();
     },100);
 }

使用效果：

演示地址：戳我

制作炫酷雪花背景的jQuery插件的更多相关文章

  1. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  2. 超炫酷web前端的jQuery/HTML5应用搜罗

    作为前端开发者,我们肯定都使用过非常多的jQuery插件,毋庸置疑,jQuery非常流行,尤其是结合HTML5和CSS3以后,让这些jQuery插件有了更多地动画效果,更为绚丽多彩. 1.HTML5/ ...

  3. 一款超级炫酷的编辑代码的插件 Power Mode

    今天偶尔发现了一款比较炫酷的插件,想让你们看看效果 打代码的时候会有非常炫酷的效果哟 因为我用的编辑器是VScode,所以我也只搞了搞VSCode中使用Power Mode的方法,如果你用的是别的编辑 ...

  4. Vue + Bootstrap 制作炫酷个人简历（一）

    最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...

  5. 用AI制作炫酷效果

    PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...

  6. web报表设计器在线制作炫酷图表

    相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...

  7. 制作炫酷banner js插件,revolution

    这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果.. ...

  8. Vue + Bootstrap 制作炫酷个人简历（二）

    没想到隔了这么久才来更新. 用vue做简历,不是非常适合,为什么呢. 因为简历没什么数据上的操作,一般都是静态的内容. 不过都说了用Vue来做,也只能强行续命了. 这里是我做好的成品  非一般简历 由 ...

  9. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...

随机推荐

  1. <数据挖掘导论>读书笔记7 Apriori算法

    Apriori算法是一种最有影响的挖掘布尔关联规则频繁项集的算法.其核心是基于两阶段频集思想的递推算法.该关联规则在分类上属于单维.单层.布尔关联规则.在这里,所有支持度大于最小支持度的项集称为频繁项 ...

  2. 数据链路层差错检测之循环冗余检验CRC

    引用https://blog.csdn.net/wenqiang1208/article/details/71641414 为什么引入CRC 现实的通信链路都不会是理想的.这就是说,比特在传输的过程中 ...

  3. oracle 自动表分区

    Oracle 新功能自动分区: 实现代码: create table t_interval partition by range(created)//dba_objects 视图的一个字段 inter ...

  4. js 递归树结构数据查找父级

    1.json树数据查找所有父级--完成 json:树结构数据 var arrData = [{ "label": "中国", "City": ...

  5. JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

    补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变 ...

  6. 通过winmm.dll控制声音播放

    介绍如何通过winmm.dll播放声音 首先导入两个函数 /// <summary> /// 向媒体控制接口发送控制命令 /// </summary> /// <para ...

  7. influxdb 的安装（centos）

    安装命令: # for 64-bit systems wget http://s3.amazonaws.com/influxdb/influxdb-latest-1.x86_64.rpm sudo r ...

  8. nginx关于 error_page指令详解.md

    error_page指令解释 nginx指令error_page的作用是当发生错误的时候能够显示一个预定义的uri,比如: error_page 502 503 /50x.html; 这样实际上产生了 ...

  9. bzoj2119 股市的预测

    传送门 感觉智商莫名其妙的就变低了……写这题的时候死活想不出来…… 做法其实不难…… 题目要求形如ABA的串的个数,我们可以枚举A的长度,利用标记关键点的方法统计答案.设枚举到的答案为k,每k个点标记 ...

  10. mysql索引是什么？索引结构和使用详解

    索引是什么 mysql索引: 是一种帮助mysql高效的获取数据的数据结构,这些数据结构以某种方式引用数据,这种结构就是索引.可简单理解为排好序的快速查找数据结构.如果要查“mysql”这个单词,我们 ...