JQuery-Snowfall降雪插件使用

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

    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.其他应用



posted @ 2018-06-20 19:05  gqzdev  阅读(564)  评论(0)    收藏  举报