插件使用十分简单，代码已经放至我的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. Win中同时安装python2和python3及SulimeText3的python IDE搭建

    一.下载安装Sublime Text3,初衷是不想忍受pycharm的打开速度,想享受下飞的质感.Sublime Text3的安装已经久远,请自行google. 二.安装python2.7与pytho ...

  2. Python基础(1) - 初识Python

    Python 特点: 1)面向对象 2)解释执行 3)跨平台.可移植 4)垃圾回收机制 5)动态数据类型.强类型 6)可扩展.可嵌入 Python可以方便调用C/C++等语言,同时也可以方便的被C/C ...

  3. TypeLoadException: Could not load type 'Microsoft.AspNetCore.Mvc.Internal.IHttpResponseStreamWriterFactory' from assembly 'Microsoft.AspNetCore.Mvc.Core, Version=2.1.2.0 ...

    今天调试 asp.net core 2.0 项目时遇到了如下错误: TypeLoadException: Could not load type 'Microsoft.AspNetCore.Mvc.I ...

  4. Codeforces 809D. Hitchhiking in the Baltic States

    Description 给出 \(n\) 个数 \(a_i\),每一个数有一个取值 \([l_i,r_i]\) ,你来确定每一个数,使得 \(LIS\) 最大 题面 Solution 按照平时做法,设 ...

  5. VirtualBox-4.3.0启动报错及解决办法

    今天装了VirtualBox-4.3.0-89960-Win.exe,安装过程后启动时报错: 虚拟电脑控制台-严重错误(标题) 创建 COM 对象失败. 应用程序将被中断. 被召者 RC: E_NOI ...

  6. C#导入Excel|读取Excel方法

    OleDbConnection读取 /// <summary>       /// 返回Excel数据源       /// </summary>       /// < ...

  7. (原创).Net将EF运用于Oralce一 准备工作

    网上有很多EF运用于Oracle的博文,但是找了半天发现大多数博文大都语焉不详,于是决定自己折腾. 首先我的开发工具为vs2010,那么最适用于VS2010的EF版本为多少呢?答案是EF5.我在Sta ...

  8. 多文件上传demo

    @ApiOperation(value = "批量上传", notes = "批量上传", httpMethod = "POST") @Po ...

  9. Apache2.4+PHP7.3 安装及整合教程[Windows]

    系统环境:Win10 64位 Apache版本:2.4.37 64位 PHP版本:7.3.1 64位 下载 安装的第一步肯定是下载了,可以直接到我的网盘(密码:18tp)下载,下载完成后将文件解压到你 ...

  10. MySql数据快速导入

    使用LOAD DATA INFILE 插入速度可以提升很多 左侧是直接导入100W花费135s ,Dos界面通过Load方式导入450W只用时23s,性能一下子显示出来了.