一个很好使用的降雪插件，可以实现雪花、爱心、图片等下降落。

1、JQuery-Snowfall插件的使用方法：

增加了使用图像作为雪花而不是纯色元素的功能。

$(element).snowfall({image :"images/flake.png", minSize: 10, maxSize:32});

纯版

snowFall.snow(elementCollection, {image : "images/flake.png", minSize: 10, maxSize:32});

elementCollection可以是任何有效的元素，例如document.body

雪选项的值为

flakeCount，

flakeColor，

片状指数，

minSize属性，

MAXSIZE，

minSpeed，

MAXSPEED，如果浏览器支持，

圆形，真或假，使雪花圆形。如果浏览器支持它，

阴影，真或假，给雪花一个阴影。
       	作者：ganquanzhong@qq.com

       	时间：2018-06-20

       	描述：Make it snow on you page or elements

      

	 该插件的参数有：

	flakeCount|number 雪花数量

	flakeColor|#RGB 雪花颜色

	minSize|number 雪花最小体积

	maxSize|number 雪花最大体积

	minSpeed|number 雪花最小速度

	maxSpeed|number 雪花最大速度

	round|boolean true雪花圆形|false方形(笑哭)

	shadow|boolean true雪花有阴影|false无阴影

	image|url 雪花图片

	author：ganquanzhong

	blog：https://ganquanzhong.top

用法示例：

Example Usage :

$(document).snowfall({flakeCount : 100, maxSpeed : 10});

-or-

$('#element').snowfall({flakeCount : 800, maxSpeed : 5, maxSize : 5});

-or with defaults-

$(document).snowfall();
  • To clear -
$('#element').snowfall('clear');

2、JQuery-Snowfall插件的使用演示：

    源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>snowfall演示</title>

		<!--

        	作者：ganquanzhong@qq.com

        	时间：2018-06-20

        	描述：Make it snow on you page or elements

        

			 该插件的参数有：

			flakeCount|number 雪花数量

			flakeColor|#RGB 雪花颜色

			minSize|number 雪花最小体积

			maxSize|number 雪花最大体积

			minSpeed|number 雪花最小速度

			maxSpeed|number 雪花最大速度

			round|boolean true雪花圆形|false方形(笑哭)

			shadow|boolean true雪花有阴影|false无阴影

			image|url 雪花图片

			author：ganquanzhong

			blog：https://www.jianshu.com/p/410b448aca3e

		-->

		<style>

			/*JQuery-Snowfall CSS*/

			body {

				overflow: hidden;

			}

			.heart-body {

				width: 500px;

				margin: 100px auto;

				position: relative;

			}

			.snowfall-flakes:before,

			.snowfall-flakes:after {

				content: "ganquanzhong";

				position: absolute;

				left: 0px;

				top: 0px;

				display: block;

				width: 20px;

				height: 38px;

				background: red;

				border-radius: 50px 50px 0 0;

			}

			.snowfall-flakes:before {

				-webkit-transform: rotate(-45deg);

				/* Safari 和 Chrome */

				-moz-transform: rotate(-45deg);

				/* Firefox */

				-ms-transform: rotate(-45deg);

				/* IE 9 */

				-o-transform: rotate(-45deg);

				/* Opera */

				transform: rotate(-45deg);

			}

			.snowfall-flakes:after {

				left: 13px;

				-webkit-transform: rotate(45deg);

				/* Safari 和 Chrome */

				-moz-transform: rotate(45deg);

				/* Firefox */

				-ms-transform: rotate(45deg);

				/* IE 9 */

				-o-transform: rotate(45deg);

				/* Opera */

				transform: rotate(45deg);

			}

		</style>

	</head>

	<body>

		<!--使用CDN-->

		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

		<script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>

		<!--javascript脚本-->

		<script>

			//调用飘落函数 实现飘落效果

			$(document).snowfall({

				flakeCount: 65 ,// 数量

				round:true, //圆形

				//shadow:true, //阴影

				minSpeed:1, //最小速度

				maxSpeed:5 //最大速度

			});

			//使用图像作为雪花而不是纯色元素的功能。

			$(document).snowfall({

				image :"images/flake1.jpg", 

				minSize: 8, 

				maxSize:50,

				minSpeed:1,

				maxSpeed:5

			});

			$(document).snowfall({

				image :"images/flake2.jpg", 

				minSize: 8, 

				maxSize:50,

				minSpeed:1,

				maxSpeed:5

			});

		</script>

	</body>

</html>

效果图：

1.无图片

2.有图片

3.其他应用

JQuery-Snowfall降雪插件使用的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  3. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  4. jQuery 人脸识别插件，支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  5. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  6. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  7. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  8. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  9. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

随机推荐

  1. 剑指offer-面试题35-复杂链表的复制-链表

    /* 题目: 实现一个函数,复制复杂链表,返回复制链表的头节点. */ /* 思路: 第一步,复制一个链表S‘,插在原链表S中. 第二步,链表S’复制链表S的random指针. 第三步:拆分链表S和S ...

  2. maven的核心概念——继承

    15.1 为什么需要继承机制 由于非compile范围的依赖信息是不能在“依赖链”中传递的,所以有需要的工程只能单独配置.例如: Hello <dependency> <groupI ...

  3. Linux分区类型EXT2、EXT3、EXT4详解

    一.EXT2与EXT3 Linux之前缺省情况下使用的文件系统为Ext2,ext2文件系统的确高效稳定.但是,随着Linux系统在关键业务中的应用,Linux文件系统的弱点也渐渐显露出来了:其中系统缺 ...

  4. Android显示单元--像素、分辨率、颜色

    1.像素 老子曾说“天下难事必作于易,天下大事必作于细”,Android开发也是一样,再复杂的App也无非就是数百万个像素点的排列组合.像素虽然看似简单,但是里面大有学问.如果在开发时对像素单位不以为 ...

  5. 2020省选模拟训练1 排列（perm）多项式exp+EGF

    这道题真的还是简单的一批..... 我当时要是参加考试的话该多好(凭这一道题就能进前 5 了) 十分显然的指数型生成函数. 令 $f[i]$ 表示有 $i$ 个点的答案. 然后显然有 $f[i]=\s ...

  6. Microsoft visual studio 2015已停止工作最全解决办法

    1.重装系统,不到万不得已不要选择...麻烦. 2.使用管理员权限运行VS,部分可能有效. 3.卸载重新安装vs,如果是一些配置问题或许能解决,还有要是卸载的干净可能有效. 4.据说可能是插件有问题造 ...

  7. .net mvc中epplus导出excel

    帮助类 using OfficeOpenXml; using OfficeOpenXml.Style; using System; using System.Collections.Generic; ...

  8. Largest Rectangle in a Histogram POJ - 2559

    很显然是单调栈 这里记录一种新的写法,这种写法基于递推,但是相比之下比单调栈更好写 #include<cstdio> #include<map> #include<set ...

  9. Miller_Rabin()算法素数判定 +ollard_rho 算法进行质因数分解

    //****************************************************************// Miller_Rabin 算法进行素数测试//速度快,而且可以 ...

  10. JDBC连接数据库的7个步骤

    1.JDBC所需的四个参数username.password.url.driverClass 2.加载JDBC驱动程序 3.创建数据库连接connection对象conn 4.创建preparedSt ...