当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

使用jquery.barrager.js弹幕插件需要在页面中引入jquery和jquery.parallux.min.js文件。

```html
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.barrager.js"></script>     
```            
#####  发布弹幕
弹幕文字为必选项,图片,链接如果为空则不显示。其它的可选项有默认值,弹幕具体配置如下代码。

```html
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);
```
#####  清除所有弹幕
可以通过removeAll()方法来清除所有的弹幕。

```html
$.fn.barrager.removeAll();               
```
####  集成 
#####  通用后端代码
读取服务端有两种模式,适应于各种不同的场景：

- 1、实时读取,隔x秒请求一次接口,获取一条弹幕,发送。
- 2、一次读取完毕,隔x秒发送一条弹幕。
注意:json数据需要HTML 实体化以防止xss攻击。

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

```html
<?php 
//数组里面可以自定义弹幕的所有属性。
$barrages=
array(
    array(
        'info'   => '第一条弹幕',
        'img'    => 'static/img/heisenberg.png',
        'href'   => 'http://www.yaseng.org',
        ),
    array(
        'info'   => '第二条弹幕',
        'img'    => 'static/img/yaseng.png',
        'href'   => 'http://www.yaseng.org',
        'color'  =>  '#ff6600'
        ),
    array(
        'info'   => '第三条弹幕',
        'img'    => 'static/img/mj.gif',
        'href'   => 'http://www.yaseng.org',
        'bottom' => 70 ,
        ),
    array(
        'info'   => '第四条弹幕',
        'href'   => 'http://www.yaseng.org',
        'close'  =>false,
        ),
    );
 
//随机输出一个 
echo  json_encode($barrages[array_rand($barrages)]);    
```              
浏览器端获取json弹幕数据,通过setInterval()来调用,如有弹幕,就显示。 代码如下：

```html
//每条弹幕发送间隔
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代码)：

```html
$barrages=
array(
  array(
      'info'   => '第一条弹幕',
      'img'    => 'static/img/heisenberg.png',
      'href'   => 'http://www.yaseng.org',
 
      ),
  array(
      'info'   => '第二条弹幕',
      'img'    => 'static/img/yaseng.png',
      'href'   => 'http://www.yaseng.org',
      'color'  =>  '#ff6600'
 
      ),
  array(
      'info'   => '第三条弹幕',
      'img'    => 'static/img/mj.gif',
      'href'   => 'http://www.yaseng.org',
      'bottom' => 70 ,
 
      ),
  array(
      'info'   => '第四条弹幕',
      'href'   => 'http://www.yaseng.org',
      'close'  =>false,
 
      ),
 
  );
 
echo   json_encode($barrages);       
```           
浏览器端代码：

```html
$.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;
  }
}
});        
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果