jQuery逼真烟花特效插件jquery.fireworks.js

所属分类:其他-动画效果

 84149  459  查看评论 (37)
分享到微信朋友圈
X
jQuery逼真烟花特效插件jquery.fireworks.js ie兼容10

jquery-fireworks教程

jquery-fireworks是一款基于HTML5 Canvas的逼真烟花特效jQuery插件。该插件使用简单,并可自由进行配置。它可以在一个div容器中生成逼真的燃放烟花效果。

使用方法

在页面引入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%'
});



相关插件-动画效果

html5制作雪花效果

html5制作雪花效果
  动画效果
 39382  368

金币抽奖效果

金币抽奖效果
  动画效果
 49764  413

可爱的3D角色动画

可爱的3D人物动画,视线跟随鼠标移动,可拖动旋转。
  动画效果
 25669  266

js火焰特效

来自Doom PSX / Nintendo64的火焰效果
  动画效果
 23600  263

讨论这个项目(37)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    梦幻星辰 0
    2021/1/28 16:41:23
    怎么把烟花位置集中显示在一起 回复
    猪猪侠 0
    2020/1/17 17:57:41
    怎么让烟花特效和声音暂停或者清除动画啊 回复
    空心 0
    2019/9/28 19:27:57
    请问下有没有人知道怎么把烟花爆炸的范围弄大些呀
        丁仆钧1
        2021/1/27 10:03:36

        var speed = Math.cos(Math.random() * Math.PI / 2) * 30;//修改爆炸范围吗,这里30就很大了。
         this.resistance = 1.05;//修改速度,大于1,数值不要太大。

    回复
    梦@无痕 0
    2019/8/5 17:36:33
    有人知道烟花上升的速度快点,怎么改?
        西瓜1
        2019/8/5 18:30:42
        this.resistance = 1;改成this.resistance = 1.03;一点点改值不要改太大了。
        梦@无痕0
        2019/8/6 12:31:46
        谢谢!
        梦@无痕0
        2019/8/6 14:37:16
        还想请问下,jsl文件里面200行去掉黑色背景后,烟花发射完,会有印记,可以把发射后的印记取消不?
        zousaili0
        2020/1/13 9:56:15
        你把烟花印记去掉了吗
        BattleofLexington1
        2020/1/13 11:53:06

        把下面值

        // clear canvas
        context.fillStyle = "rgba(0, 0, 0, 0.05)";

        0.05改0.2就没有了

        context.fillStyle = "rgba(0, 0, 0, 0.2)";
    回复
    xuzhiqiu19 0
    2019/4/10 17:19:02
    js 报错怎么解决啊
    回复
    夙兮执梦 0
    2019/1/21 21:50:31
    手机端无法播放,页面是空白的,有大佬知道如何解决吗 回复
        0
    2019/1/1 19:57:15
    ? 0
    2018/12/17 11:28:01
    那个音效的地址怎么换成其他的? 回复
    凌梦琳 0
    2018/9/23 11:27:09
    黑色背景如何去掉啊
        骚年”0
        2018/12/13 11:14:29
        canvas的fillStyle属性设置背景颜色,在js代码201行可以改一下试试
    回复
    紫枫麟 0
    2018/7/31 16:19:31
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复