JBarrager jquery弹幕插件

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

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

相关插件-独立的部件

新浪天气、时间获取插件

LeoWeather 是一款专门用来获取天气和时间的插件,本插件自创的标签模式使得用户可以更好的对显示内容进行排版!
  独立的部件
 12587  160

jQuery HTML导出Excel插件table2excel

jquerytable2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容,不需要的行可以不导出。它文件体积小,使用非常方便。
  独立的部件
 25794  138

jQuery网站引导插件joyride

jQuery网站引导插件joyride
  独立的部件
 8752  42

可停靠屏幕边缘的侧边栏插件

我自己封装的可停靠屏幕边缘的侧边栏插件,可以制作页面的通知信息,客服信息,联系方式等
  独立的部件
 8054  100

讨论这个项目(22)回答他人问题或分享插件使用方法奖励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

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

    回复
    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
    回复
取消回复