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：ganquanzhongblog：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降雪插件使用相关推荐

Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
十个jQuery图片画廊插件推荐
2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...
推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...
15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

JQuery-Snowfall降雪插件使用

JQuery-Snowfall降雪插件使用相关推荐

最新文章

热门文章