插件使用十分简单，代码已经放至我的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. Golang教程：数组和切片

    数组 数组是类型相同的元素的集合.例如,整数 5, 8, 9, 79, 76 的集合就构成了一个数组.Go不允许在数组中混合使用不同类型的元素(比如整数和字符串). 声明 var variable_n ...

  2. WPF 资源字典

    使用好处:存储需要被本地话的内容(错误消息字符串等,实现软编码),减少重复的代码,重用样式,实现多个项目之间的共享资源;修改一个地方所有引用的地方都会被修改,方便统一风格; 使用方法,归纳起来主要有下 ...

  3. Java - 如何进行安全发布

    首先让我简单解释一下所谓"发布". 发布(publish),使对象可以在当前作用域之外的代码中可见,如果该对象被发布,则该对象的非私有域中引用的所有实例同样也会被发布. 不仅仅是作 ...

  4. JS实现中英文混合文字溢出友好截取功能

    在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 ...

  5. [shell]管理 Sphinx 启动|停止|重新生成索引的脚本

    对于启动sphinx的服务,可以直接输入如下命令 /usr/bin/searchd -c /etc/sphinx/sphinx.conf <!-- /usr/local/bin/searchd  ...

  6. 使用 typeof 来检测对象是否undefined

    需求 判断是否为undefined 解决 使用 typeof 来检测对象是否已定义: if (typeof Obj !== "undefined" && Obj ! ...

  7. GET和POST请求的区别如下

    POST和GET都是向服务器提交数据,并且都会从服务器获取数据. 区别: 1.传送方式:get通过地址栏传输,post通过报文传输. 2.传送长度:get参数有长度限制(受限于url长度),而post ...

  8. java web 之Session

    1.Session简单介绍 由于Http是无状态的协议,所以服务端需要记录用户的状态时,就需要某种机制来识别具体的用户,实现这个机制的方式就是session. 典型的场景比如购物车,当你点击下单按钮时 ...

  9. enter键触发事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. css-css的基本选择器（三种）

    ** 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2)class选择器 * 每个HTML标签中都有一个属性 ...