JBarrager jquery弹幕插件

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

 11206  124  查看评论 (33)
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方式轮询异步获取数据,通过上述语句发送弹幕

相关插件-独立的部件

jQuery二维码生成插件qrcode.js

应用小工具二维码生成
  独立的部件
 7116  141

jQuery前端excel导入插件xlsx.core.js

此插件作用可以把excel表,导入到网页中用table显示出来
  独立的部件
 1627  18

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印
  独立的部件
 9823  80

jQuery表格 可选择导出各种格式

表格内容详情可选择导出各种格式(Excel(xls)、PDF、PNG)
  独立的部件
 21278  168

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

    秋の恋 0
    2018/4/17 20:16:30
    canvs很小的时候 字体怎么变大 回复
    中国货运网-市场部 0
    2018/4/13 17:04:49
    不能写入添加啊。 回复
    罗湖luo 0
    2018/1/18 16:13:07
    var obj = [{
        msg: "万事如意"
    }, {
        msg: "马到成功"
    }];
    setInterval(function() {
        $('canvas').barrager(obj);
        console.log(11);
    }, 2000);

    为何用变量的形式后,弹幕只能发一次,而无法循环呢

        Sailiy0
        2018/3/22 7:08:31
        你的这个obj是数组,数组是引用类型的,你可以把这个var obj放到setInterval回掉函数里
    回复
    HJ 0
    2018/1/9 17:28:31
    请问这个插件我可以用在视频弹幕上吗
        Sailiy0
        2018/3/22 7:09:02
        这个插件主要是弹幕的实现思想,你随便修改使用
    回复
    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的时候会移除,你可以修改的更大。该地方建议和缓冲池的大小成正比例,具体可以自己调试的更好。

    回复
取消回复