wap网站程序,福州关键词排名,创建免费网站需要什么条件,合肥做网站mdyun#x1f387;前言 大家好呀#xff01;我是小梦是✨。 除夕马上到来#xff0c;激动的心颤动的手#xff01;今年由于管控严厉#xff0c;许多地方禁止燃放烟花爆竹#xff0c;既然不让我们放#xff0c;那我们就用代码来实现烟花特效#xff01; 文末有彩蛋哦~ 烟花效… 前言 大家好呀我是小梦是✨。 除夕马上到来激动的心颤动的手今年由于管控严厉许多地方禁止燃放烟花爆竹既然不让我们放那我们就用代码来实现烟花特效 文末有彩蛋哦~ 烟花效果图 怎么样是不是很酷炫呢相信大家已经迫不及待的想要尝试一下了 非常简单我们只需要简单的写10行代码再基于一款非常优秀的JQuery插件——jquery.fireworks.js后面会有关于该插件的简单介绍便可以实现酷炫的烟花秀。话不多说直接上代码。 HTMLJQuery !DOCTYPE html
html langzh
headtitle2022 Happy New Year! ! ! !/title/head
bodydiv classfirework-container headerh1 style text-align:center2022 新年快乐 虎年快乐/h1/header/div!-- audio autoplayautoplay controlscontrols looploop preloadauto srcFire.mp3 /audio --script typetext/javascript srcjs/jquery-1.11.0.min.js/scriptscript typetext/javascript srcjs/jquery.fireworks.js/scriptscript typetext/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 typetext/javascript srcjs/jquery.min.js/script
script typetext/javascript srcjs/jquery.fireworks.js/script HTML结构 使用一个div元素作为烟花的容器。 div classdemo/div 初始化插件 在页面DOM元素加载完毕之后可以通过fireworks()方法来初始化该烟花特效插件 $(.demo).fireworks({ sound: true, // 声音效果opacity: 0.9, width: 100%, height: 100%
}); 彩蛋附上几位大佬写的烟花插件真的是酷炫到炸
原链接 原链接
