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

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

 58467  384  查看评论 (34)
分享到微信朋友圈
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%'
});



相关插件-动画效果
  动画效果
 37308  350

支持小数,从零开始的翻牌器

jQuery数字滚动,支持小数,从零开始的翻牌器,
  动画效果
 11708  176

html5制作雪花效果

html5制作雪花效果
  动画效果
 31844  305

3D云 (酷!)

3D云在云端!
  动画效果
 61515  1260

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

    猪猪侠 0
    2020/1/17 17:57:41
    怎么让烟花特效和声音暂停或者清除动画啊 回复
    空心 0
    2019/9/28 19:27:57
    请问下有没有人知道怎么把烟花爆炸的范围弄大些呀 回复
    梦@无痕 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
    刻骨铭心 0
    2018/6/19 17:18:26
    手机上没有声音怎么解决? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复