jQuery有序的弹幕插件barrageWall.js

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

33978 378 查看评论 (19)

分享到微信朋友圈

查看演示立即下载

插件描述：每条弹幕为从上至下有序的出现，你可以设置弹幕轨道的条数。每条弹幕出现时从上至下查找你设置的弹幕轨道上是否存在还有弹幕没有将内容完全展现在屏幕上，有则查找下一条，没有则出现在当前轨道上。当每条轨道都存在还有弹幕没有将内容完全展现在屏幕上时触发强制弹幕出现的机制，插件会找出所有轨道中每条弹幕全部的内容展现需要时间最短的那条，然后将当前弹幕强制压在该弹幕轨道上。

使用方法：

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

jQuery CSS3弹性下拉菜单

三维粒子探索

jQuery网站引导插件joyride

独立的部件

33623 326

jQuery表格导出数据

将表格的数据导出到excel,csv,pdf或是直接打印

独立的部件

51333 566

jQuery实现弹幕实例

一个很好用的实例，适合新手

独立的部件

30537 332

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印

独立的部件

71802 404

讨论这个项目（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);