JBarrager jquery弹幕插件

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

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

相关插件-独立的部件

鼠标右键插件context.js

简单、好用 、轻量的右键菜单插件context.js
  独立的部件
 2958  27

jquery下载所有版本(实时更新)

jquery下载,实时更新jquery1.2到最新3.2.1所有版本下载
  独立的部件
 2123935  592

可自定义轻量侧边悬浮插件

可以自定义悬浮.邮箱、QQ、电话、二维码等....
  独立的部件
 2800  70

html5读取二维码

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

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

    Zzz 0
    2017/8/7 14:36:49

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

    回复
    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
    牛逼哄哄 不解释 最重要的作者免费分享给大家 给力的不要不要的 ! 回复
    老妖精70 0
    2017/1/7 18:01:48
    刈?、?ㄖ 0
    2017/1/6 10:01:57

    插件有意思~有没有控制滚动速度的参数和显示高度的参数

        Sailiy0
        2017/1/7 11:01:46
        _this.msgs[i].L=_this.width; //代表初始距离左边的距离
        _this.msgs[i].T=parseInt(Math.random() * 700);//随机产生的Top距离
        _this.msgs[i].S=parseInt(Math.random() * (10 - 4) + 4);//随机产生的速度(单位时间内移动的像素)
        _this.msgs[i].C=_this.colorArr[Math.floor(Math.random() * _this.colorArr.length)];//随机从颜色数组中提取的颜色
        Sailiy0
        2017/1/7 11:01:10
        上边的值你可以手动绑定,不让它随机生成,代码很简单,你研究一下。最近比较忙,有时间我会写个完整的注释,插件官网http://www.rainx.org
    回复
取消回复