📋 前言
- 🖱 博客主頁：在下馬農的碎碎念
- ? 本文由在下馬農原創，首發于CSDN
- 📆 首發時間：2021/12/31
- 📅 最近更新時間：2021/12/31
- 🤵 此馬非凡馬，房星本是星，向前敲瘦骨，猶自帶銅聲，
- 🙏作者水平有限，如發現錯誤，請留言轟炸哦！萬分感謝！
- 🤗 歡迎關注🔎點贊👍收藏??留言📝先贊后看，腰纏萬貫
我用盡了全力，過著平凡的一生，
——《月亮與六便士》
以下是正文
一、效果展示
煙花秀代碼已部署上線，點擊下方鏈接即可查看美麗的煙花秀！！！！
在線展示鏈接：煙花秀
二、不多嗶嗶，直接上代碼
全部代碼（Html）:
<!DOCTYPE html>
<html lang="zh">
<head><title>2022 Happy New Year! ! ! !</title></head>
<body>
<div class="firework-container" >
<header>
<h1 style = "text-align:center">2022 HappyNewYear! ! ! !</h1>
</header>
</div>
<!-- <audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="Fire.mp3" ></audio> -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.fireworks.js"></script>
<script type="text/javascript">
$('.firework-container').fireworks({
sound: false, // sound effect
opacity: 0.9,
width: '100%',
height: '100%'
});
</script>
</body>
</html>
三、需要的檔案
1、 jquery.fireworks.js
插件描述：jquery-fireworks.js是一款基于HTML5 Canvas的逼真煙花特效jQuery插件，該插件使用簡單，并可自由進行配置，它可以在一個div容器中生成逼真的燃放煙花效果，
使用方法：
- 在頁面引入jquery和jquery.fireworks.js檔案，
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.fireworks.js"></script>
- 在頁面放一個div容器
<div class="firework-container" >
</div>
- 最后初始化插件
$('.demo').fireworks({
sound: false, // 聲音效果
opacity: 0.9,
width: '100%',
height: '100%'
});
2、jquery-1.11.0.min.js
3、沒了，簡單粗暴
四、代碼鏈接
有需要原始碼的小伙伴可以私信哦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/399583.html
標籤：其他