5

【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效

 3 years ago
source link: https://blog.csdn.net/weixin_42306958/article/details/122757181
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效

original.png
_超 梦 于 2022-01-31 07:00:00 发布 3139

?前言

大家好呀!我是小梦是✨。

除夕马上到来,激动的心颤动的手!今年由于管控严厉,许多地方禁止燃放烟花爆竹,既然不让我们放,那我们就用代码来实现烟花特效!

文末有彩蛋哦~


烟花效果图


怎么样,是不是很酷炫呢?相信大家已经迫不及待的想要尝试一下了 ,非常简单,我们只需要简单的写10行代码,再基于一款非常优秀JQuery插件——jquery.fireworks.js(后面会有关于该插件的简单介绍),便可以实现酷炫的烟花秀。话不多说直接上代码。

HTML+JQuery:

 在代码中我们引入了jquery-1.11.0.min.js与jquery.fireworks.js插件,这个强大插件实现了烟花秀的主要功能,大家需要这款插件的话可以留言【烟花插件,当然也可以去【jQuery插件库搜索。


jquery.fireworks.js介绍

jquery.fireworks.js插件原文链接,点击进入~icon-default.png?t=M0H8https://www.jq22.com/jquery-info11031

使用方法

在页面引入jquery和jquery.fireworks.js文件。

HTML结构

使用一个<div>元素作为烟花的容器。

<div class="demo"></div>

初始化插件

在页面DOM元素加载完毕之后,可以通过fireworks()方法来初始化该烟花特效插件:





彩蛋:附上几位大佬写的烟花插件,真的是酷炫到炸!

原链接


原链接



About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK