使用jQuery怎么實現一個彈幕效果

這期內容當中小編將會給大家帶來有關使用jQuery怎么實現一個彈幕效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

/**
 * 彈幕
 */
$(function () {

  function BarrageManager (options) {

    this.opts = {
      url    : './res/danmu.json',
      loadDelay : 5000 , // 輪詢時間間隔
    }

    $.extend( this.opts , options);
    this.bc = new BarrageCollection();
  }

  BarrageManager.prototype.load = function () {
    var self = this ;
    $.getJSON(self.opts.url , function (data) {
      if(data.data.length > 0) {
        for(var i = 0 ; i < data.data.length ; i++) {
          var item = data.data[i] ;
          self.bc.add(new Barrage({
            id:item.id,
            name:item.fromUserName,
            text:item.content,
            icon:item.fromUserIcon ? item.fromUserIcon : './images/head-icon.png'
          }));
        }
        self.loop();
      }
    });
  }

  BarrageManager.prototype.loop = function () {
    var len = this.bc.mq.length , self = this ;
    while (len--) {
      this.bc.mq[len].start(this.bc , len);
    }  

    setTimeout(function () {
      self.load();
    } , this.opts.loadDelay);

  }

  function BarrageCollection () {
    this.mq = [] ;
  }

  BarrageCollection.prototype.add = function (barrage) {
    this.mq.push(barrage);
  }

  BarrageCollection.prototype.remove = function (barrage) {
    var index = this.mq.findIndex(function (item) {
      return barrage.opts.id == item.opts.id ;
    });
    if(index != -1) {
      this.mq.splice(index , 1);
    }
    barrage.opts.$el.remove();
  }

  function Barrage (options) {
    this.opts = {
      $el     : null ,
      left    : 0 ,
      bgColor   : [Math.floor(Math.random()*255),Math.floor(Math.random()*255),Math.floor(Math.random()*255)] ,
      offset   : 50 ,   // 使彈幕完全移出屏幕外
      duration  : 10000 ,  // 彈幕從右往左移動的時間 
      delayTime  : 1000 ,  // 彈幕延遲移動時間
    };
    $.extend( this.opts , options);
    this.init();
  }

  Barrage.prototype.init = function () {

    this.opts.$el = $("<span><img src="+this.opts.icon+"><em>"+this.opts.name+":</em>"+this.opts.text+"</span>");

    var top = Math.ceil(Math.random() * 10 );
    this.opts.$el.css({
      top:top * 40 +'px',
      backgroundColor:"rgb("+this.opts.bgColor.join(",")+")"
    });

    var delay = Math.ceil(Math.random()*10);
    this.opts.delayTime *= Math.abs(delay - 5);

    var dur = Math.ceil(Math.random() * 10);
    this.opts.duration += dur * 1000 ; 

    $('#barrage-wrapper').append(this.opts.$el);
    this.opts.left = -this.opts.$el.width() - this.opts.offset ;
  }

  Barrage.prototype.start = function (bc , index) {
    var self = this ;
    bc.mq.splice(index , 1);
    setTimeout(function () {
      self.move(bc);
    }, this.opts.delayTime);
  }

  Barrage.prototype.move = function (bc) {
    var self = this ;
    this.opts.$el.animate({
      left:this.opts.left+'px'
    } , this.opts.duration ,"linear" , function () {
      bc.remove(self); 
    });
  }

  new BarrageManager().load();
});

代碼分析

首先我定義了3個類

• BarrageManager ： 彈幕管理類

• BarrageCollection ：彈幕集合類

• Barrage ： 彈幕類
  

BarrageManager 中的方法：

• load : 加載彈幕數據

• loop: 間隔指定時間循環加載數據
  

load 方法就不加以說明了，主要講一下 loop方法：

BarrageManager.prototype.loop = function () {
    var len = this.bc.mq.length , self = this ;
    while (len--) {
      this.bc.mq[len].start(this.bc , len);
    }  

    setTimeout(function () {
      self.load();
    } , this.opts.loadDelay);

  }

通過while循環，將彈幕集合中所有彈幕對象取出，并調用他的start方法，開啟彈幕動畫，然后每間隔指定時間再去調用一次load方法，生成新的彈幕對象，并添加到彈幕結合中。

PS: 這里其實最好使用socket，然服務端主動推送，而不是客戶端通過http進行輪詢，我這里主要講解實現彈幕的思路，至于怎么獲取數據，這個大家可以去優化，不過我可以推薦一個socket第三方包 socket.io 這個庫挺厲害的，大家可以去看看。

BarrageCollection 中的方法：

• add : 添加彈幕

• remove: 移除彈幕
  

BarrageCollection 中的方法其實就是對數據進行了一層包裝操作而已，其實也可以不要這一層。代碼也相對簡單，我就不多說了（嘻嘻，大家現在水平都不錯，一眼就能看明白對吧）。

Barrage 中的方法：

• init : 初始化參數

• start: 開啟彈幕移動的動畫

• move: 執行彈幕移動動畫
  

其實Barrage中的方法也相對簡單，首先在Barrage中定義了它所需要的屬性，在new Barrage() 的時候，傳遞參數，然后調用init方法進初始化，生成dom，設置彈幕塊當前的背景顏色，以及屏幕的垂直位置如下：

var top = Math.ceil(Math.random() * 10 );
this.opts.$el.css({
   top:top * 40 +'px',
   backgroundColor:"rgb("+this.opts.bgColor.join(",")+")"
});

隨機生成top值，為了避免彈幕塊在同一垂直位置出現。
然后設置彈幕塊從右往左移動時所需要的時間，以及延遲開始移動的時間

// 設置彈幕塊延遲移動的時間
var delay = Math.ceil(Math.random()*10);
this.opts.delayTime *= Math.abs(delay - 5);
// 設置彈幕塊移動的時長 
var dur = Math.ceil(Math.random() * 10);
this.opts.duration += dur * 1000 ;

設置這兩個參數，是為了不讓彈幕塊在進入屏幕的時候同時出現，并且如果移動速度相同，就感覺整體在一起移動，效果不太好。

最后將彈幕塊的dom添加在html中，并計算出left值

$('#barrage-wrapper').append(this.opts.$el);
this.opts.left = -this.opts.$el.width() - this.opts.offset ;

left值也就是彈幕塊要移動的距離，這里我加了一個偏移量offset（這個隨意），可能我css設置有點問題，如果不加這個，彈幕塊在還沒完全移出屏幕的時候就從html中移除了，會突然變沒，有點突兀，因此加了一個偏移量，保證彈幕塊完全移出屏幕

當彈幕塊都初始化完成了之后，調用start方法，開始移動

Barrage.prototype.start = function (bc , index) {
    var self = this ;
    bc.mq.splice(index , 1);
    setTimeout(function () {
      self.move(bc);
    }, this.opts.delayTime);
  }

move方法則是使用jq的animate方法來實現dom的移動動畫

Barrage.prototype.move = function (bc) {
    var self = this ;
    this.opts.$el.animate({
      left:this.opts.left+'px'
    } , this.opts.duration ,"linear" , function () {
      bc.remove(self); 
    });
  }

在彈幕完全移出屏幕時，也就是動畫結束時，將當前彈幕dom從html中移除。整體的思路也就是這樣，是不是很簡單，不過在這里我對start方法中的這段代碼進行說明一下：

bc.mq.splice(index , 1);

上述就是小編為大家分享的使用jQuery怎么實現一個彈幕效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。