【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效
生活随笔
收集整理的這篇文章主要介紹了
【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🎇前言
大家好呀！我是小夢是?。
除夕馬上到來，激動的心顫動的手！今年由于管控嚴厲，許多地方禁止燃放煙花爆竹，既然不讓我們放，那我們就用代碼來實現煙花特效！
文末有彩蛋哦~
煙花效果圖
怎么樣，是不是很酷炫呢？相信大家已經迫不及待的想要嘗試一下了 ，非常簡單，我們只需要簡單的寫10行代碼，再基于一款非常優秀的JQuery插件——jquery.fireworks.js（后面會有關于該插件的簡單介紹），便可以實現酷炫的煙花秀。話不多說直接上代碼。
HTML+JQuery：
<!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 新年快樂！ 虎年快樂！</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 effectopacity: 0.9, width: '100%', height: '100%' });</script> </body> </html>?在代碼中我們引入了jquery-1.11.0.min.js與jquery.fireworks.js插件，這個強大插件實現了煙花秀的主要功能，大家需要這款插件的話可以留言【煙花插件】，當然也可以去【jQuery插件庫】搜索。
jQuery插件庫https://www.jq22.com/
jquery.fireworks.js介紹
jquery.fireworks.js插件原文鏈接，點擊進入~https://www.jq22.com/jquery-info11031
使用方法
在頁面引入jquery和jquery.fireworks.js文件。
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.fireworks.js"></script>HTML結構
使用一個<div>元素作為煙花的容器。
<div class="demo"></div>初始化插件
在頁面DOM元素加載完畢之后，可以通過fireworks()方法來初始化該煙花特效插件：
$('.demo').fireworks({ sound: true, // 聲音效果opacity: 0.9, width: '100%', height: '100%' });
?
彩蛋：附上幾位大佬寫的煙花插件，真的是酷炫到炸！
原鏈接
?
原鏈接
?
?
?
?
總結
以上是生活随笔為你收集整理的【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新股一个涨停板都不给，有比它更惨的，打新
- 下一篇： 防抖与节流方案_前端ajax优化解决方案