溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
如今幾乎所有的視頻網站都有彈幕功能，那么今天我們就自己用原生 JavaScript 封裝一個彈幕類。這個類希望有如下屬性和實例方法：
屬性
方法
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 = 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 = function (data) {
this.pushData(data)
this.start()
}
發射彈幕
下面來看看發射彈幕的邏輯
this.start = function () {
//開始調度list
this.dispatchList(this.list)
}
this.dispatchList = function (list) {
for (let i = 0; i < list.length; i++) {
this.dispatchRow(list[i], i)
}
}
this.dispatchRow = function (row, i) {
if (!this.indexs[i] && this.indexs[i] !== 0) {
this.indexs[i] = 0
}
//真正的調度從這里開始，用一個實例變量存儲好當前調度的下標。
if (row[this.indexs[i]]) {
this.dispatchItem(row[this.indexs[i]], i, this.indexs[i])
}
}
this.dispatchItem = function (item, i) {
//調度過一次的某條彈幕下一次在調度就不需要了
if (!item || this.idMap[item.id]) {
return
}
let index = this.indexs[i]
this.idMap[item.id] = item.id
let div = document.createElement('div'),
parent = document.querySelector(`${el} .barrage-list-${i}`),
width,
pastTime
div.innerHTML = item.content
div.className = 'barrage-item'
parent.appendChild(div)
width = getBoxSize(div).width
div.style = `width:${width}px;display:none`
pastTime = this.computeTime(width) //計算出下一條彈幕應該出現的時間
//彈幕飛一會~
this.run(div)
if (index > this.list[i].length - 1) {
return
}
let len = this.timeoutFuncs.length
//記錄好定時器，后面清空
this.timeoutFuncs[len] = setTimeout(() => {
this.indexs[i] = index + 1
//遞歸調用下一條
this.dispatchItem(this.list[i][index + 1], i, index + 1)
}, pastTime);
}
//用css動畫，整體還是比較流暢的
this.run = function (item) {
item.classList += ' running'
item.style.left = "left:100%"
item.style.display = ''
item.style.animation = `run ${this.speed/1000}s linear`
//已完成的打一個標記
setTimeout(() => {
item.classList+=' done'
}, this.speed);
}
//根據彈幕的寬度和gapWth，算出下一條彈幕應該出現的時間
this.computeTime = function (width) {
let length = width + this.gapWidth
let time = Math.round(length / this.boxSize.width * this.speed/2)
return time
}
動畫css具體如下
@keyframes run {
0% {
left: 100%;
}
50% {
left: 0
}
100% {
left: -100%;
}
}
.run {
animation-name: run;
}
其余方法
停止
利用動畫的paused屬性停止
this.stop = function () {
let items = document.querySelectorAll(`${el} .barrage-item`);
[...items].forEach(item => {
item.className += ' pause'
})
}
.pause {
animation-play-state: paused !important;
}
重新開始
移除pause類即可
this.restart = function () {
let items = document.querySelectorAll(`${el} .barrage-item`);
[...items].forEach(item => {
removeClassName(item, 'pause')
})
}
打開關閉
做一個顯示隱藏的邏輯即可
this.close = function () {
this.container.style.display = 'none'
}
this.open = function () {
this.container.style.display = ''
}
清理彈幕
this.clearData = function () {
//清除list
this.list = []
//清除dom
document.querySelector(`${el}`).innerHTML = ''
//清除timeout
this.timeoutFuncs.forEach(fun => clearTimeout(fun))
}
最后用一個定時器定時清理過期的彈幕:
setInterval(() => {
let items = document.querySelectorAll(`${el} .done`);
[...items].forEach(item=>{
item.parentNode.removeChild(item)
})
}, this.speed*5);
最后
感覺這個的實現還是有缺陷的，如果是你設計這么一個類，你會怎么設計呢？
到此這篇關于原生JavaScript實現彈幕組件的示例代碼的文章就介紹到這了,更多相關JavaScript 彈幕組件內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
