前言
如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类。这个类希望有如下属性和实例方法:
属性
- el容器节点的选择器,容器节点应为绝对定位,设置好宽高
- height 每条弹幕的高度
- mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满
- speed弹幕划过屏幕的时间
- gapWidth后一条弹幕与前一条弹幕的距离
方法
- pushData 添加弹幕元数据
- addData持续加入弹幕
- start开始调度弹幕
- stop停止弹幕
- restart 重新开始弹幕
- clearData清空弹幕
- close关闭
- open重新显示弹幕
PS:有一些自封装的工具函数就不贴出来了,大概知道意思就好
初始化
引入JavaScript文件之后,我们希望如下使用,先采取默认配置。
let barrage = new Barrage({ el: '#container' })
参数初始化:
function Barrage(options) { let { el, height, mode, speed, gapWidth, } = options this.container = document.querySelector(el) this.height = height || 30 this.speed = speed || 15000 //2000ms this.gapWidth = gapWidth || 20 this.list = [] this.mode = mode || 'half' this.boxSize = getBoxSize(this.container) this.perSpeed = Math.round(this.boxSize.width / this.speed) this.rows = initRows(this.boxSize, this.mode, this.height) this.timeoutFuncs = [] this.indexs = [] this.idMap = [] }
先接受好参数然后初始化,下面看看getBoxSize和initRows
function getBoxSize(box) { let { height, width } = window.getComputedStyle(box) return { height: px2num(height), width: px2num(width) } function px2num(str) { return Number(str.substring(0, str.indexOf('p'))) } }
通过getComputedStyleapi计算出盒子的宽高,这里用来计算容器的宽高,之后也会用到。
function initRows(box, mode, height) { let divisor = getDivisor(mode) rows = Math.ceil(box.height * divisor / height) return rows } function getDivisor(mode) { let divisor = .5 switch (mode) { case 'half': divisor = .5 break case 'top': divisor = 1 / 3 break; case 'full': divisor = 1; break default: break; } return divisor }
根据高度算出弹幕应该有多少行,下面会有地方用到行数。
插入数据
有两种插入数据的方法,一种是添加源数据,一种是持续添加。先来看添加源数据的方法:
this.pushData = http://www.cppcns.com/wangluo/javascript/function (data) { this.initDom() if (getType(data) =='[object Object]') { //插入单条 this.pushOne(data) } if (getType(data) == '[object Array]') { //插入多条 this.pushArr(data) } }
this.initDom = function () { if (!document.querySelector(`${el} .barrage-list`)) { //注册dom节点 for (let i = 0; i < this.rows; i++) { let div = document.createElement('div') div.classList = `barrage-list barrage-list-${i}` div.style.height = `${this.boxSize.height*getDivisor(this.mode)/this.rows}px` this.container.appendChild(div) } } } this.pushOne = function (data) { for (let i = 0; i < this.rows; i++) { if (!this.list[i]) this.list[i] = [] } let leastRow = getLeastRow(this.list) //获取弹幕列表中最少的那一列,弹幕列表是一个二维数组 this.list[leastRow].push(data) } this.pushArr = function (data) { let list = sliceRowList(this.rows, data) list.forEach((item, index) => { if (this.list[index]) { this.list[index] = this.list[index].concat(...item) } else { this.list[index] = item } }) } //根据行数把一维的弹幕list切分成rows行的二维数组 function sliceRowList(rows, list) { let sliceList = [], perNum = Math.round(list.length / rows) for (let i = 0; i < rows; i++) { let arr = [] if (i == rows - 1) { arr = list.slice(i * perNum) } else { i == 0 ? arr = list.slice(0, perNum) : arr = list.slice(i * perNum, (i + 1) * perNum) } sliceList.push(arr) } return sliceList }
持续加入数据的方法只是调用了添加源数据的方法,并且开始了调度而已
this.addData = http://www.cppcns.com/wangluo/javascript/function (data) { this.pushData(data) this.start() }原生JavaScript实现弹幕组件的示例代码
扫一扫手机访问
