插件使用十分简单，代码已经放至我的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. postgres entityframework foreignkey

    public class Model { [Key, Column("id"), DatabaseGenerated(DatabaseGeneratedOption.Identit ...

  2. deblurGAN

    -- main.py -- util.py -- data_loader.py -- mode.py -- DeblurGAN.py -- vgg19.py -- layer.py -- vgg19. ...

  3. nodejs图片裁剪、缩放、水印

    关于nodejs下图片的裁剪.水印,网上的模块很多,主要如下: gm:https://github.com/aheckmann/gm node-canvas:https://github.com/Au ...

  4. 前端标注软件-pxcook像素大厨使用心得

    我们在日常开发过程中,设计师给提供的UI图,经常需要标注尺寸,有时候设计师难免会遗漏标注,这样就会大大的增加我们的沟通成本,因此,使用一款好用的标注软件就尤为重要,我推荐这款标注软件---pxcook ...

  5. equals()重写

    ** 注意 ** 1.重写equals方法修饰符必须是public,因为是重写的Object的方法. 2.参数类型必须是Object. 3.重写equals方法后最好重写hashCode方法,否则两个 ...

  6. 简单测试Java线程安全中阻塞同步与非阻塞同步性能

    摘抄自周志明老师的<深入理解Java虚拟机:JVM高级特性与最佳实践>13.2.2 线程安全的实现方法 1.名词解释 同步是指锁哥线程并发访问共享数据时,保证共享数据同一时刻只被一个线程访 ...

  7. MySql数据快速导入

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

  8. 单例模式的c++实现

    #pragma once #include <iostream> #include <memory> #include <Windows.h> using name ...

  9. Oracle易忘知识点记录

    1.SQL Select语句完整的执行顺序: ①from子句组装来自不同数据源的数据: ②where子句基于指定的条件对记录行进行筛选: ③group by子句将数据划分为多个分组: ④使用聚集函数进 ...

  10. ThreadLocal 理解

    主要方法 public void set(T value); public T get(); private T setInitialValue(); public void set(T value) ...