jQuery有序的弹幕插件barrageWall.js

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

 33803  378  查看评论 (19)
分享到微信朋友圈
X
jQuery有序的弹幕插件barrageWall.js ie兼容10

使用方法:

1,实际调用时必须设置你的 弹幕墙id 和 弹幕的行数 并 初始化弹幕墙

var option = {
    container: "#container", //弹幕墙的id
    barrageLen: 15 //弹幕的行数
}
barrageWall.init(option); //初始化弹幕墙

2,然后调用 

barrageWall.upWall(userImg,userId, message);

3,弹幕移动的动画效果由css实现,transform: translateX();

使用注意:

1,如果你要为弹幕设置其他特殊效果请注意你的页面性能;

2,transform不会引起页面的重绘,最好不要更改弹幕移动的方式,如果你必须更改,请修改js,因为我是依靠弹幕的矩阵值进行定位的;

3,每条弹幕为从上至下有序的出现,你可以设置弹幕轨道的条数;

4,每条弹幕出现时从上至下查找你设置的弹幕轨道上是否存在还有弹幕没有将内容完全展现在屏幕上,有则查找下一条,没有则出现在当前轨道上;

5,当每条轨道都存在还有弹幕没有将内容完全展现在屏幕上时触发强制弹幕出现的机制,插件会找出所有轨道中每条弹幕全部的内容展现需要时间最短的那条,然后将当前弹幕强制压在该弹幕轨道上。

相关插件-独立的部件

js上下文菜单插件basicContext.js

basicContext.js 强大的纯Js上下文菜单插件
  独立的部件
 29930  385

操作浏览器标题栏插件Title.js

Title.js是一个javascript库用来操作浏览器标题栏,没有依赖性。 这里有用法示例:添加前缀,加后缀,改变预定义的标题,招牌效果、打字机效果。
  独立的部件
 43827  359

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

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

mui搜索列表添加热门等模块

利用mui搜索列表的源代码,加入我们需求的热门等模块
  独立的部件
 28700  299

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

    ッ?默?づ 0
    2020/10/13 9:52:57

    还有就是怎么循环遍历我数据库的数据呢

    // var num=0,timer =setInterval(function(){
    //     num++;
    //     if(num>50){clearInterval(timer)}
    //     barrageWall.upWall("images/aq.png","我是说话人"+num,"我说的我说的话我说的话我说的话我说的话我说的话话");
    // },500);
        CBL11911268540
        2022/3/21 16:36:38
        解决了吗
    回复
    ッ?默?づ 0
    2020/10/13 9:51:34
    怎么循环播放呢 回复
    江南无路 0
    2020/9/3 15:32:36
    可以用我博客上看看效果吗?
    回复
    前端开发--切图?己认证 0
    2020/5/25 18:47:32
    模拟多条数据的时候会叠在一起 回复
    50分 0
    2018/12/13 11:03:03
    你好,发现一个bug,当我把barrageLen设置成3行(或者小数值)的时候,从第4条弹幕开始,后面的弹幕都会重叠在第一条的位置上,top和left的值都为0,请问有解决办法么?移动端。 回复
    不言 0
    2018/8/30 17:37:36
    我觉得每次弹幕发送出去之后都要在下面清空比较好,不然会重复按好多次也不知道发出去没有 回复
    ┵ 衫衫衫 0
    2018/8/17 16:42:49
    如何让弹幕循环播放呢?? 回复
    追风少年福尔康 0
    2018/8/9 16:35:21
    怎么让弹幕循环呀呀??? 回复
    李信妥 0
    2018/6/28 2:31:17
    世上无难事,只怕 0
    2018/3/24 16:18:26
    有意思,收藏+感谢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复