Jquery实现弹幕效果

最新推荐文章于 2024-09-13 21:40:18 发布

K-Code

最新推荐文章于 2024-09-13 21:40:18 发布

阅读量1.1w

点赞数 6

分类专栏： web前端文章标签：弹幕 jquery

本文链接：https://blog.csdn.net/u010298576/article/details/80405588

版权

这篇博客介绍了如何使用Jquery实现弹幕效果，主要思路是通过创建BarrageManager、BarrageCollection和Barrage类，实现弹幕从右向左移动，移出屏幕后删除。详细讲解了每个类的方法，包括加载弹幕数据、循环播放、添加和移除弹幕，以及弹幕动画的实现。文章强调了实际应用中最好使用socket服务端推送数据，并推荐了socket.io库。

摘要由CSDN通过智能技术生成

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

主要思路

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