Jquery实现弹幕效果

话不多说吧，直接看效果吧：

主要思路

其实弹幕的主要思路很简单，就是将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 () {
   
            s