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表单验证之密码确认
May 22 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP如何实现跨域
2016/05/30 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
浅析Ajax语法
2016/12/05 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python中的ceil()方法使用教程
2015/05/14 Python
python实现简单购物商城
2016/05/21 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
使用python3实现操作串口详解
2019/01/01 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
如何在Python中创建二叉树
2021/03/30 Python