易的CSS3炫酷3D滾動預覽特效， 3D旋轉(zhuǎn)展示！

效果圖：

實現(xiàn)代碼：

html:

css:

javascript：

話不多說吧，我們先看看效果圖:

主要思路

其實彈幕的主要思路很簡單，就是將div從右向左移動，直到完全移除屏幕之后，將當前div從body中移除，這里我采用了面向?qū)ο蟮乃枷雭硖幚恚唧wjs代碼如下：

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();
});

代碼分析

1. BarrageManager ： 彈幕管理類
2. BarrageCollection ：彈幕集合類
3. 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)，將彈幕集合中所有彈幕對象取出，并調(diào)用他的start方法，開啟彈幕動畫，然后每間隔指定時間再去調(diào)用一次load方法，生成新的彈幕對象，并添加到彈幕結(jié)合中。

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ù)，然后調(diào)用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中移除了，會突然變沒，有點突兀，因此加了一個偏移量，保證彈幕塊完全移出屏幕

當彈幕塊都初始化完成了之后，調(diào)用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); 
 });
}

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

bc.mq.splice(index , 1);

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

如果你需要完整代碼，可以私信關注我哦！