jQuery弹幕插件(原创)

所属分类:UI,其他-工具提示,独立的部件

 33247  403  查看评论 (17)
分享到微信朋友圈
X
jQuery弹幕插件(原创) ie兼容8

更新时间:2018/4/17 下午1:57:49

更新说明:把卡顿效果变成平滑效果


更新时间:2018/4/9 下午4:57:36

更新说明:设置z-index:999


barrage

弹幕(适用于评论,留言,打赏等)

默认数据格式为

var data = [
      {href : 'http://fy.035k.com',text : '我的博客http://fy.035k.com'},
      {href : 'http://www.baidu.com',text : '百度'},
      {href : 'http://www.jq22.com',text : 'jquery插件网'},
      {href : 'http://www.035k.com',text : '苏打绿可根据历史'},
      {href : '',text : '管理数据管理'},
      {href : '',text : '另外今年光缆和并购水晶宫老师'}
]

data为数据,数据格式可调换,更改数据格式时,记得去改源码中的36行

数据初始化

var Obj = $('body').barrage({
    data: data, //数据列表
    row: 5, //显示行数
    time: 1000, //间隔时间
    gap: 20, //每一个的间隙
    position: 'fixed', //绝对定位
    direction: 'bottom right', //方向
   
})

开始弹幕方法

Obj.start();

添加弹幕方法

//添加评论
$("#submit_barraget").click(function(){
    var val = $("#barrage_content").val();
    //此格式与data.js的数据格式必须一致
    var addVal = {
      href : '',
      text : val
    }
    //添加进数组
    Obj.data.unshift(addVal);
    alert('评论成功');
})

关闭弹幕方法

Obj.close();
相关插件-工具提示,独立的部件

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 29214  343

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 31517  310

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 46988  407

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 36506  449

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

    无谓 0
    2023/1/14 10:11:21
    怎么横向展示呢? 回复
    我不是伟人 0
    2019/12/9 15:38:13
    怎样才能第一次默认渲染4条数据呢
        公元2013い1
        2020/2/25 11:37:34
        数据初始化里row改成5试试
    回复
    @ 爽歪歪 0
    2019/8/6 17:42:38
    怎么调节每一条弹幕的时间间隔
        公元2013い0
        2020/2/25 11:37:59
        数据初始化里修改time
        公元2013い1
        2020/2/25 11:38:00
        数据初始化里修改time
    回复
    倾心、是为谁 0
    2018/12/13 15:18:00
    看起来挺不错的,厉害了 回复
    0
    2018/8/20 11:31:33
    这个能不能不循环,然后新增的时候就让下边多一个, 回复
    集锦科技-吴洋 0
    2018/5/11 10:13:15
    麦田de守望 0
    2018/4/17 10:35:06
    请问你这个每次创建一个的时候停顿一下的这个效果怎么改?看起来本别扭啊,如何改成平滑的出入?
        执手到白头*/0
        2018/4/18 9:12:03
        这个我已更新提交,等待更新后下载便是平滑式的
        &dawn0
        2019/11/20 13:37:01
        怎么还是卡顿的效果
    回复
    秦时明月? 0
    2018/4/10 10:27:05
    貌似你上传的样式一定不是这样的 感觉弹幕那有点卡 一顿一顿的
        执手到白头*/0
        2018/4/10 11:37:02
        一每个弹幕显示后确实时有一个一顿的效果,我觉得这个效果挺好的呀,而且还有层次感,有必要去掉这个效果吗?
        _C0
        2018/4/25 1:25:07
        厉害了厉害了
    回复
    逆流成河 0
    2018/4/9 11:04:11
    在这里面用户留言的内容,一刷新不就没有了吗
        执手到白头*/1
        2018/4/9 11:35:07
        如果用到线上的话,当留言后会把内容存到数据库里面,页面的数据也是从数据库中查出来的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复