jquery.barrager.js专业的网页弹幕插件

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

 53766  368  查看评论 (34)
分享到微信朋友圈
X
jquery.barrager.js专业的网页弹幕插件 ie兼容8

Jquery.barrager.js 是一款优雅的网页弹幕插件,支持显示图片,文字以及超链接。支持速度、高度、颜色、数量等自定义。能轻松集成到论坛,博客等网站中。

使用

发布弹幕

弹幕文字必选,图片,链接为空则不显示,其他的可选项有默认值,弹幕具体配置如下代码。

var item={
   img:'static/heisenberg.png', //图片 
   info:'弹幕文字信息', //文字 
   href:'http://www.yaseng.org', //链接 
   close:true, //显示关闭按钮 
   speed:6, //延迟,单位秒,默认6 
   bottom:70, //距离底部高度,单位px,默认随机 
   color:'#fff', //颜色,默认白色 
   old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色 
 }
$('body').barrager(item);

清除所有弹幕

$.fn.barrager.removeAll();

兼容低版本ie

ie 浏览器小于9不兼容css 圆角,采用兼容样式,可单独设置弹幕的颜色,属性为old_ie_color,建议不要与网页主背景色相同。 兼容模式效果图

集成

通用后端

读取服务端有两种模式,适应于不同的场景

  1. 实时读取,隔x秒请求一次接口,获取一条弹幕,发送。

  2. 一次读取完毕,隔x秒发送一条弹幕。

注意:json数据需要HTML 实体化以防止xss攻击。

第一种模式示范代码 server 端(php)

<?php 
//数组里面可以自定义弹幕的所有属性。
$barrages=
array(
    array(
        'info'   => '第一条弹幕',
        'img'    => 'static/img/heisenberg.png',
        'href'   => 'http://www.jq22.com',
        ),
    array(
        'info'   => '第二条弹幕',
        'img'    => 'static/img/yaseng.png',
        'href'   => 'http://www.jq22.com',
        'color'  =>  '#ff6600'
        ),
    array(
        'info'   => '第三条弹幕',
        'img'    => 'static/img/mj.gif',
        'href'   => 'http://www.jq22.com',
        'bottom' => 70 ,
        ),
    array(
        'info'   => '第四条弹幕',
        'href'   => 'http://www.jq22.com',
        'close'  =>false,
        ),
    );
//随机输出一个 
echo  json_encode($barrages[array_rand($barrages)]);

浏览器端获取json 弹幕数据,setInterval 调用,如有弹幕,就显示。 代码如下

//每条弹幕发送间隔
var looper_time=3*1000;
//是否首次执行
var run_once=true;
do_barrager();
function do_barrager(){
  if(run_once){
      //如果是首次执行,则设置一个定时器,并且把首次执行置为false
      looper=setInterval(do_barrager,looper_time);                
      run_once=false;
  }
  //获取
  $.getJSON('server.php?mode=1',function(data){
      //是否有数据
      if(data.info){
           $('body').barrager(data);
      }
  });
}

第二种模式示范代码。 server 端 (php)

//数组里面可以自定义弹幕的所有属性。
$barrages=
array(
    array(
        'info'   => '第一条弹幕',
        'img'    => 'static/img/heisenberg.png',
        'href'   => 'http://www.jq22.com',
        ),
    array(
        'info'   => '第二条弹幕',
        'img'    => 'static/img/yaseng.png',
        'href'   => 'http://www.jq22.com',
        'color'  =>  '#ff6600'
        ),
    array(
        'info'   => '第三条弹幕',
        'img'    => 'static/img/mj.gif',
        'href'   => 'http://www.jq22.com',
        'bottom' => 70 ,
        ),
    array(
        'info'   => '第四条弹幕',
        'href'   => 'http://www.jq22.com',
        'close'  =>false,
        ),
    );
echo   json_encode($barrages);

浏览器端

$.ajaxSettings.async = false;
$.getJSON('server.php?mode=2',function(data){
//每条弹幕发送间隔
var looper_time=3*1000;
var items=data;
//弹幕总数
var total=data.length;
//是否首次执行
var run_once=true;
//弹幕索引
var index=0;
//先执行一次
barrager();
function  barrager(){
  if(run_once){
      //如果是首次执行,则设置一个定时器,并且把首次执行置为false
      looper=setInterval(barrager,looper_time);                
      run_once=false;
  }
  //发布一个弹幕
  $('body').barrager(items[index]);
  //索引自增
  index++;
  //所有弹幕发布完毕,清除计时器。
  if(index == total){
      clearInterval(looper);
      return false;
  }
}
});


相关插件-独立的部件

jQuery表格 可选择导出各种格式

表格内容详情可选择导出各种格式(Excel(xls)、PDF、PNG)
  独立的部件
 36418  319

jQuery漂亮的CSS3颜色渐变选择器

jQuery漂亮的CSS3颜色渐变选择器可直接生成各种CSS渐变代码,功能强大!
  独立的部件
 16288  144

CSS3开关切换按钮

多组超具创意的CSS3开关切换按钮
  独立的部件
 19815  253

jQuery社会华分享插件

jQuery社会华分享插件支持微信,QQ,新浪,人人等
  独立的部件
 25845  326

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

    ??暖暖?? 0
    2018/12/7 10:55:00
    怎么限制范围,比如控制在一个div里
        jishenghao0
        2019/3/16 11:23:28
        同问,怎么限制啊
    回复
    .... 0
    2018/12/6 10:36:07
    怎么让弹幕距离顶部有一定距离 回复
    张金鑫 0
    2018/9/22 11:30:55
    没有学过php,用的是maven项目,不知道怎么用这个插件 回复
    George 0
    2018/1/26 18:37:20
    怎么加快速度呢
        hi,大叔0
        2018/3/22 16:15:23
        我也想知道哦啊
    回复
    George 0
    2018/1/16 17:30:43
    给那个弹幕方法加了个定时器循环滚动后 大概几分钟后弹幕数量过多 有很多都重叠在一起 判断在什么条件下需要清除定时器呢 回复
    XTE 0
    2017/8/15 14:10:14
    请问这个插件是哪里实现离开页面或切换页面停止移动弹幕的 回复
    喵了个咪 0
    2017/5/15 18:26:12

    问题:当加载超过10条时,页面会变得十分慢;

    我的措施:1.将i+=1改成i= $(window).width()+500;(margin-right每次都+1,数量多时页面会变慢)

                     2.判断$(".barrage").length的长度,当大于一定的数量就进行删除;

                     2.将css中的barrage类名加上css3的过渡;

    不足:1.鼠标移到弹幕上弹幕无法停止

             2.当AJAX的请求大于50条时,会变得有轻微卡顿

    自身水平不足,求大神指点

    if ($(".barrage").length > 50) {
        for (var s = 0; s < 5; s++) {
            $(".barrage").eq(s).remove();
        }
    }	
    function barrager() {
        var window_width = $(window).width() + 600;
        if (i < window_width) {
            i = $(window).width() + 500;
    
            $(id).css('margin-right', i);
        } else {
    
            $(id).remove();
            return false;
        }
    
    }
    回复
    喵了个咪 0
    2017/5/15 16:10:05

    我使用循环遍历出数据时,info会重复出现在一个div中

    回复
    刺猬的手指 0
    2017/1/12 14:01:29

    苹果不兼容啊  咋整

    回复
    Dream 丶 0
    2016/12/13 17:12:04
    弹幕一多的话,弹幕整体速度会变得非常慢,达到一定数量后直接停止了
        华影随风口 0
        2017/1/8 21:01:24
        我也遇到同样问题不知道怎么优化
        ?.小晶晶0
        2018/7/22 15:21:09
        楼主解决了吗
        Azikou0
        2019/1/15 8:54:31
        我改成了用right代替margin。loop循环在弹幕移除时,清理掉。,但是效果也不是很好
    回复
取消回复