原生JavaScript實現彈幕元件de方法
2020-10-09 18:00:41
欄目今天為大家介紹原生JavaScript實現彈幕元件的方法。
前言
如今幾乎所有的視訊網站都有彈幕功能，那麼今天我們就自己用原生 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 pisor = getpisor(mode)
rows = Math.ceil(box.height * pisor / height) return rows
}function getpisor(mode) { let pisor = .5
switch (mode) { case 'half':
pisor = .5
break
case 'top':
pisor = 1 / 3
break; case 'full':
pisor = 1; break
default: break;
} return pisor
}複製程式碼根據高度算出彈幕應該有多少行，下面會有地方用到行數。
插入資料
有兩種插入資料的方法，一種是新增源資料，一種是持續新增。先來看新增源資料的方法：
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 p = document.createElement('p')
p.classList = `barrage-list barrage-list-${i}`
p.style.height = `${this.boxSize.height*getpisor(this.mode)/this.rows}px`
this.container.appendChild(p)
}
}
}複製程式碼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 p = document.createElement('p'),
parent = document.querySelector(`${el} .barrage-list-${i}`),
width,
pastTime
p.innerHTML = item.content
p.className = 'barrage-item'
parent.appendChild(p)
width = getBoxSize(p).width
p.style = `width:${width}px;display:none`
pastTime = this.computeTime(width) //計算出下一條彈幕應該出現的時間
//彈幕飛一會~
this.run(p) 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實現彈幕元件de方法的詳細內容，更多請關注TW511.COM其它相關文章！