jQuery實現(xiàn)簡單彈幕效果

更新時間：2019年11月28日 10:43:57 作者：K-Code

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單彈幕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)彈幕效果的具體代碼，供大家參考，具體內容如下

話不多說吧，直接看效果吧：

主要思路

其實彈幕的主要思路很簡單，就是將div從右向左移動，直到完全移除屏幕之后，將當前div從body中移除，這里我采用了面向對象的思想來處理，具體js代碼如下：

JS

/**
 * 彈幕
 */
$(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 : 加載彈幕數(shù)據(jù)
loop: 間隔指定時間循環(huán)加載數(shù)據(jù)

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循環(huán)，將彈幕集合中所有彈幕對象取出，并調用他的start方法，開啟彈幕動畫，然后每間隔指定時間再去調用一次load方法，生成新的彈幕對象，并添加到彈幕結合中。

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

BarrageCollection 中的方法：

add : 添加彈幕
remove: 移除彈幕

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

Barrage 中的方法：

init : 初始化參數(shù)
start: 開啟彈幕移動的動畫
move: 執(zhí)行彈幕移動動畫

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

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

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

// 設置彈幕塊延遲移動的時間
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 ;

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

最后將彈幕塊的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方法來實現(xiàn)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);

我在開始動畫之前，首先將當前彈幕對象從BarrageCollection 中移出了，按理說應該在彈幕完全移出屏幕時才執(zhí)行這個操作才對，其實是因為，當我們在調用 BarrageManager 中的loop方法循環(huán)獲取彈幕數(shù)據(jù)的時候，會改變BarrageCollection 中彈幕集合的長度，這時候會造成傳遞到 start方法中的index值可能會大于集合的長度，從而報錯，因此我在每次調用start的時候就將當前彈幕對象從集合中移除，確保集合每次都是空的，從而不會有其他影響。

源碼下載：jQuery實現(xiàn)簡單彈幕效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: