jQuery弹幕插件(原创)

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

 2140  19  查看评论 (6)
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();
相关插件-工具提示,独立的部件

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

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

一款腾讯UED设计的提示插件

一款腾讯UED设计的提示插件
  工具提示
 15428  115

jquery 工具提示插件awTooltip

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

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 11734  79

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

    麦田de守望 0
    2018/4/17 10:35:06
    请问你这个每次创建一个的时候停顿一下的这个效果怎么改?看起来本别扭啊,如何改成平滑的出入?
        执手到白头*/0
        2018/4/18 9:12:03
        这个我已更新提交,等待更新后下载便是平滑式的
    回复
    秦时明月? 0
    2018/4/10 10:27:05
    貌似你上传的样式一定不是这样的 感觉弹幕那有点卡 一顿一顿的
        执手到白头*/0
        2018/4/10 11:37:02
        一每个弹幕显示后确实时有一个一顿的效果,我觉得这个效果挺好的呀,而且还有层次感,有必要去掉这个效果吗?
    回复
    逆流成河 0
    2018/4/9 11:04:11
    在这里面用户留言的内容,一刷新不就没有了吗
        执手到白头*/1
        2018/4/9 11:35:07
        如果用到线上的话,当留言后会把内容存到数据库里面,页面的数据也是从数据库中查出来的
    回复
取消回复