JBarrager jquery弹幕插件

所属分类:其他-独立的部件

 8589  115  查看评论 (27)
JBarrager jquery弹幕插件 ie兼容9

调用方式:

html部分代码:

<canvas style="width: 1280px;height: 720px;background-color: rgba(0,0,0,0.2)">你的浏览器不支持canvas</canvas>

发送弹幕:

$('canvas').barrager([{"msg":"这是我发的。。。哈哈哈"}]);

多条发送方式:

$('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);

清除/关闭弹幕:

$('canvas').barrager("clear");

在实际应用,可以通过ajax方式轮询异步获取数据,通过上述语句发送弹幕

相关插件-独立的部件

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印
  独立的部件
 6972  71

js格式化货币插件currencyFmatter.js

currencyFmatter.js是一款简单实用的纯js格式化货币插件。该插件包含155种不同国家的货币,以及715种不同语言的本地化设置。它还能处理某些不采用的货币,功能非常强大。
  独立的部件
 5120  26

html5读取二维码

手机端web调用摄像头读取解析二维码
  独立的部件
 13468  111

jquery.barrager.js专业的网页弹幕插件

一款专业的网页弹幕插件。支持显示图片文字以及超链接,支持自定义弹幕的速度、高度、颜色、数量等
  独立的部件
 20931  214

讨论这个项目(27)回答他人问题或分享插件使用方法奖励jQ币

    18663891838 0
    2017/11/28 11:30:56

    滚动在最上面的字有时会只显示一半T=parseInt(Math.random() * 700)改多少都没用

        186638918381
        2017/11/28 12:01:15
        var vtop = parseInt(Math.random() * 250);
        if (vtop < 20) {
            vtop = 20;
        }
        _this.msgs[i].T = vtop;

        判断不会高于20px顶部不会裁剪,(Math.random() * 700)比画布的高度小几十个像素,底部不会被裁剪,完美解决

    回复
    邃晓了,今后 0
    2017/11/24 15:25:44
    Zzz 0
    2017/8/7 14:36:49

    滚动在最上面或者最下面的字有时会只显示一半,请问这个该怎么解决?

        186638918380
        2017/11/28 13:04:30
        var vtop = parseInt(Math.random() * 250);if (vtop < 20) {    vtop = 20;}_this.msgs[i].T = vtop;

        判断不会高于20px顶部不会裁剪,(Math.random() * 700)比画布的高度小几十个像素,底部不会被裁剪,完美解决

    回复
    XTE 0
    2017/7/21 16:21:47
    请问这插件可以放自己的背景图片吗
        Sailiy0
        2017/7/27 16:42:23

        最简单的方法是把canvas放到一个div里边,设置div的背景图片

        Sailiy0
        2017/7/27 16:52:37

        当然,你也可以手动的在canvas上绘制图片,只需要在循环缓冲区前就可以了

    回复
    AI风逝云栖 0
    2017/7/20 9:35:43

    您好,我想问一下 如果我的每一个弹幕都有一个背景色怎么设置  

        Sailiy0
        2017/7/27 16:41:46

        http://www.rainx.org/2016/12/22/html5-canvas%E5%AE%9E%E7%8E%B0%E9%AB%98%E5%B9%B6%E5%8F%91%E8%A7%86%E9%A2%91%E5%BC%B9%E5%B9%95%E5%8A%9F%E8%83%BD/,请看代码注释,你可以在draw方法里, fillText前,画出该区域的背景色

    回复
    ?? 0
    2017/7/13 10:36:04

    字号可以是数组成随机的吗

        ??0
        2017/7/14 10:40:56

        目前

        ??0
        2017/7/14 10:51:11

        目前有一小bug,就是文字过长时,消失的速度很生硬,不知如何调

        Sailiy0
        2017/7/27 16:36:57
        http://www.rainx.org/2016/12/22/html5-canvas%E5%AE%9E%E7%8E%B0%E9%AB%98%E5%B9%B6%E5%8F%91%E8%A7%86%E9%A2%91%E5%BC%B9%E5%B9%95%E5%8A%9F%E8%83%BD/ ,代码非常精简,网站上已经注释,代码作用,你可以根据自己需要更改。
        Sailiy0
        2017/7/27 16:50:28

        代码只有80行而已,并且我的网站已经给了详细注释,关于你的问题:

        1.字号可以随机,你可以在filltext前设置随机字号。

        2.文字过长,代码里边是-200px的时候会移除,你可以修改的更大。该地方建议和缓冲池的大小成正比例,具体可以自己调试的更好。

    回复
    wangp321 0
    2017/3/31 11:32:11

    我想问一下需要怎么控制弹幕暂停呢

        Sailiy3
        2017/4/5 17:03:30

        你可以参照clear方法

        this.pause= function () {//暂停
                clearInterval(this.interval);
                this.interval="";
        };
        this.play= function () {//播放
                this.draw();
        };
    回复
    向日葵 0
    2017/2/24 11:06:05

    滚动在最上面的字有时会只显示一半

        Sailiy1
        2017/4/5 17:05:29
        _this.msgs[i].T=parseInt(Math.random() * 700);//这句代码是产生top的值,你可以试着修改
        Zzz0
        2017/8/7 14:27:52

        请问这个问题解决了吗?我也遇到了

        秦时明月?0
        2017/10/16 17:06:34

        自己定位的数值  

        自己写死的好使

        随机数取区间的还是会出现这种问题

        比如

        正常写死50-300之间的  都不会被遮住

        随机生成50-300间的就会被遮住  这是怎么回事啊?

    回复
    99 0
    2017/1/12 14:01:58

    看起来不错,先下着

    回复
    WckY 0
    2017/1/8 14:01:07
    牛逼哄哄 不解释 最重要的作者免费分享给大家 给力的不要不要的 ! 回复
取消回复