后会有期的博客
当前位置: JS > Jquery实现雪花飘落特效

Jquery实现雪花飘落特效

2020-07-08 分类:JS 作者:管理员 阅读(37)

可能实现雪花飘落特效,用html+css就可以,本篇文章,小编用jquery来实现雪花飘落特效。在圣诞节的时候亮亮吧。
用jquery实现,我们要用到一个插件,文件名称叫做snowfall.js,调用该插件的方式非常简单,只需要写上下面这段代码。写这行代码之前,请确保已经引用jquery.js,本篇文章忽略此应用步骤。小伙伴实现的时候,一定要带上哦~

1
<script type="text/javascript" src="https://raw.githubusercontent.com/loktar00/JQuery-Snowfall/master/src/snowfall.jquery.js"></script>

最最最简单开启雪花特效的方式:

1
2
3
<script>
$(document).snowfall();
</script>

除了这个,这个插件还支持以下参数设置,有需要的小伙伴,可以对下列参数进行设置

1
2
3
4
5
6
7
8
9
flakeCount,
flakeColor,
flakeIndex,
minSize,
maxSize,
minSpeed,
maxSpeed,
round,      true or false, makes the snowflakes rounded if the browser supports it.
shadow      true or false, gives the snowflakes a shadow if the browser supports it.

在这,小编展示一种示例用法:

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

消除雪花:

1
$('#element').snowfall('clear');

使用雪花作为图片元素:

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

注:该插件也支持无需jQuery即可使用的纯JavaScript版本。不要怨小编没说过这个哦~

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

欢迎打赏

支付宝
微信
0

欢迎打赏

支付宝
微信
标签:

上一篇:没有了,已经是最后文章

下一篇:

你可能感兴趣

0 条评论关于"Jquery实现雪花飘落特效"

博客简介

后会有期的博客:wudongyang.xyz:2020,一个关注前端最前沿、发布关于前端文章的个人网站。欢迎各位小伙伴前来访问,让我们一起关注前端的最前沿。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 4 篇
  • 草稿数目: 0 篇
  • 分类数目: 4 个
  • 独立页面: 0 个
  • 评论总数: 0 条
  • 链接总数: 1 个
  • 标签总数: 8 个
  • 注册用户: 1 人
  • 访问总量: 8648145 次
  • 最近更新: 2020年7月13日
服务热线:
 

 QQ在线交流

 旺旺在线