jQuery实现简单弹幕效果


Posted in jQuery onNovember 28, 2019

本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下

话不多说吧,直接看效果吧:

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

我在开始动画之前,首先将当前弹幕对象从BarrageCollection 中移出了,按理说应该在弹幕完全移出屏幕时才执行这个操作才对,其实是因为,当我们在调用 BarrageManager 中的loop方法循环获取弹幕数据的时候,会改变BarrageCollection 中弹幕集合的长度,这时候会造成传递到 start方法中的index值可能会大于集合的长度,从而报错,因此我在每次调用start的时候就将当前弹幕对象从集合中移除,确保集合每次都是空的,从而不会有其他影响。

源码下载:jQuery实现简单弹幕效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现轮播图效果
Nov 26 #jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
You might like
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP引用返回用法示例
2016/05/28 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python如何在DataFrame增加数值
2020/02/14 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
高级护理专业毕业生推荐信
2013/12/25 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
给市场的环保建议书
2014/05/14 职场文书