插件使用十分简单，代码已经放至我的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. JavaScript自适应调整文字大小

    JavaScript自适应调整文字大小 今天有个任务,发现页面上的数字由于太长而与其他数字重叠了.这个数字还不能像文字那样只显示一部分,必须全部显示.想了一些办法都不行,最后把超过1000变成1K,大 ...

  2. sleep函数作用（转）

    表示当前线程暂时不参与cpu竞争,该函数会阻塞方法,一般在比较耗时的任务中执行了一段时间后会调用一下该方法避免当前任务一直霸占cpu,详情可以查看以下参考链接. 我们可能经常会用到 Thread.Sl ...

  3. Firebird 有用的list函数

    语法: LIST ([ALL | DISTINCT] expression [, separator]) 示例: select list(u.code, ';') from m_user u 结果:查 ...

  4. WPF TextBox 聚焦

    1.利用行为 http://blog.csdn.net/lianchangshuai/article/details/9223125 2. 利用装饰器 http://stackoverflow.com ...

  5. GeneratedKeyHolder的作用：获得新建主键值

    Spring利用GeneratedKeyHolder,提供了一个可以返回新增记录对应主键值的方法: int update(PreparedStatementCreator psc, KeyHolder ...

  6. redis(4)事务

    一.事务 一般来说,事务必须满足4个条件,也就是我们常说的ACID: 1)Atomicity 原子性:一个事务中的所有操作要么全部完成,要么全部不完成,不会结束在中间的某个环节.事务在执行过程中发生错 ...

  7. jasperreports+iReport+jatoolsPrinter制作报表笔记

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 准备工作 1. 点击此下载相关的文件,并把 ims 文件夹放到 ims 工程对应的路劲下 2. 参考网址:杰创打印控件 二. ...

  8. 抽象工厂模式的C++、Java实现

    1.抽象工厂模式UML 图1. 抽象工厂模式的UML 2.C++实现 C++实现类图为: 图2. 抽象工厂模式的C++实现类图 其中,AbstractFactory的实现代码为: //抽象工厂类基类. ...

  9. ccf-201709-2 公共钥匙盒

    问题描述 有一个学校的老师共用N个教室,按照规定,所有的钥匙都必须放在公共钥匙盒里,老师不能带钥匙回家.每次老师上课前,都从公共钥匙盒里找到自己上课的教室的钥匙去开门,上完课后,再将钥匙放回到钥匙盒中 ...

  10. Makefile一 头文件及库搜索路径

    头文件及库搜索路径 头文件的搜索路径: 头文件的搜索规则是:找到就使用,停止继续往下寻找 1: #include “mytest.h” 搜索的顺序为: (1)先搜索当前目录 (2)然后搜索编译时 -I ...