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

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

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

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

纯版

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

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

雪选项的值为

  1. flakeCount，
  2. flakeColor，
  3. 片状指数，
  4. minSize属性，
  5. MAXSIZE，
  6. minSpeed，
  7. MAXSPEED，如果浏览器支持，
  8. 圆形，真或假，使雪花圆形。如果浏览器支持它，
  9. 阴影，真或假，给雪花一个阴影。
  1.        	作者：ganquanzhong@qq.com
  2.        	时间：2018-06-20
  3.        	描述：Make it snow on you page or elements
  4.       
  5. 	 该插件的参数有：
  6. 	flakeCount|number 雪花数量
  7. 	flakeColor|#RGB 雪花颜色
  8.  
  9. 	minSize|number 雪花最小体积
  10. 	maxSize|number 雪花最大体积
  11. 	minSpeed|number 雪花最小速度
  12. 	maxSpeed|number 雪花最大速度
  13. 	round|boolean true雪花圆形|false方形(笑哭)
  14. 	shadow|boolean true雪花有阴影|false无阴影
  15. 	image|url 雪花图片
  16.  
  17. 	author：ganquanzhong
  18. 	blog：https://ganquanzhong.top

用法示例：

Example Usage :

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

-or-

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

-or with defaults-

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

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

    源码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>snowfall演示</title>
  6.  
  7. 		<!--
  8.         	作者：ganquanzhong@qq.com
  9.         	时间：2018-06-20
  10.         	描述：Make it snow on you page or elements
  11.         
  12. 			 该插件的参数有：
  13. 			flakeCount|number 雪花数量
  14. 			flakeColor|#RGB 雪花颜色
  15.  
  16. 			minSize|number 雪花最小体积
  17. 			maxSize|number 雪花最大体积
  18. 			minSpeed|number 雪花最小速度
  19. 			maxSpeed|number 雪花最大速度
  20. 			round|boolean true雪花圆形|false方形(笑哭)
  21. 			shadow|boolean true雪花有阴影|false无阴影
  22. 			image|url 雪花图片
  23.  
  24. 			author：ganquanzhong
  25. 			blog：https://www.jianshu.com/p/410b448aca3e
  26. 		-->
  27.  
  28. 		<style>
  29. 			/*JQuery-Snowfall CSS*/
  30.  
  31. 			body {
  32. 				overflow: hidden;
  33. 			}
  34.  
  35. 			.heart-body {
  36. 				width: 500px;
  37. 				margin: 100px auto;
  38. 				position: relative;
  39. 			}
  40.  
  41. 			.snowfall-flakes:before,
  42. 			.snowfall-flakes:after {
  43.  
  44. 				content: "ganquanzhong";
  45. 				position: absolute;
  46. 				left: 0px;
  47. 				top: 0px;
  48. 				display: block;
  49. 				width: 20px;
  50. 				height: 38px;
  51. 				background: red;
  52. 				border-radius: 50px 50px 0 0;
  53. 			}
  54.  
  55. 			.snowfall-flakes:before {
  56. 				-webkit-transform: rotate(-45deg);
  57. 				/* Safari 和 Chrome */
  58. 				-moz-transform: rotate(-45deg);
  59. 				/* Firefox */
  60. 				-ms-transform: rotate(-45deg);
  61. 				/* IE 9 */
  62. 				-o-transform: rotate(-45deg);
  63. 				/* Opera */
  64. 				transform: rotate(-45deg);
  65. 			}
  66.  
  67. 			.snowfall-flakes:after {
  68. 				left: 13px;
  69. 				-webkit-transform: rotate(45deg);
  70. 				/* Safari 和 Chrome */
  71. 				-moz-transform: rotate(45deg);
  72. 				/* Firefox */
  73. 				-ms-transform: rotate(45deg);
  74. 				/* IE 9 */
  75. 				-o-transform: rotate(45deg);
  76. 				/* Opera */
  77. 				transform: rotate(45deg);
  78. 			}
  79. 		</style>
  80. 	</head>
  81. 	<body>
  82.  
  83. 		<!--使用CDN-->
  84. 		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  85. 		<script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
  86. 		<!--javascript脚本-->
  87. 		<script>
  88. 			//调用飘落函数 实现飘落效果
  89. 			$(document).snowfall({
  90. 				flakeCount: 65 ,// 数量
  91. 				round:true, //圆形
  92. 				//shadow:true, //阴影
  93. 				minSpeed:1, //最小速度
  94. 				maxSpeed:5 //最大速度
  95.  
  96. 			});
  97. 			//使用图像作为雪花而不是纯色元素的功能。
  98. 			$(document).snowfall({
  99. 				image :"images/flake1.jpg", 
  100. 				minSize: 8, 
  101. 				maxSize:50,
  102. 				minSpeed:1,
  103. 				maxSpeed:5
  104. 			});
  105. 			$(document).snowfall({
  106. 				image :"images/flake2.jpg", 
  107. 				minSize: 8, 
  108. 				maxSize:50,
  109. 				minSpeed:1,
  110. 				maxSpeed:5
  111. 			});
  112. 		</script>
  113. 	</body>
  114. </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. 论文阅读笔记（二十）【AAAI2019】：Spatial and Temporal Mutual Promotion for Video-Based Person Re-Identification

    Introduction (1)Motivation: 作者考虑到空间上的噪声可以通过时间信息进行弥补,其原因为:不同帧的相同区域可能是相似信息,当一帧的某个区域存在噪声或者缺失,可以用其它帧的相同区 ...

  2. (转)java 多线程 对象锁&类锁

    转自:http://blog.csdn.net/u013142781/article/details/51697672 最近工作有用到一些多线程的东西,之前吧,有用到synchronized同步块,不 ...

  3. jquery.datetimepicker中报错Cannot read property 'top' of undefined

    今天在项目里用到一个jQuery的时间插件,一开始自己写的测试demo完全么的问题 但当我把它放到项目里时问题来了,报了一个错:Cannot read property 'top' of undefi ...

  4. NODEJS 使用 sqlite3 本地文件数据库

    npm install sqlite3 var sqlite3 = require('sqlite3').verbose();var db = new sqlite3.Database('WebFil ...

  5. 图像读取函数cv::imread()的几种使用方式

    string imgpath = "C:\Users\Y\Pictures\miao.jpg"; OpenCV的imread()函数不支持单右斜线形式的路径,即不支持上述形式的路径 ...

  6. ansible-yaml语法

    1. 基础语法 - yaml结果通过空格来展示 - 数组使用"- "来表示 //注意:-后边要有一个空格 - 键值对使用": "来表示 //注意::后边要有一个 ...

  7. c#在类里不能使用Response解决方法

    response对应的类是HttpResponse,  在System.Web 命名字间里,   如果你在类中要使用   Response 的话,   需要使用System.Web.HttpConte ...

  8. H5-安卓和ios调用相机和相册

    <input v-if="ipshow" type="file" accept="image/*" name="file1& ...

  9. VS常用快捷键（最全）

    智能提示:ctrl + J方法参数提示:ctrl + shift +空格智能标记(如:提示using.实现接口.抽象类等):ctrl + . 执行测试:ctrl + R,T(当前上下文),ctrl + ...

  10. IDEA 找不到包或者找不到符号的一些解决办法

    有时使用IDE导入项目后,启动时会发生找不到包或者找不到符号的情况,下面有一些处理方法 1.右键项目Maven→Reimport 2.IDEA窗口左上角File→Invalidate and Rest ...