JS實作彈幕的簡單操作
現在很多的直播平臺或者視頻平臺都會用到彈幕加強和觀眾的互動效果，那么如何用JS實作這樣的效果呢，用一個初學者的方法記錄下這個方法，歡迎大牛指導，
-
首先需要操作檔案必須拿到Dom中的元素，當然有很多方法，這里還是用document.querySelector.
-
這邊也是為了鍵盤和滑鼠都可發送封裝了一個函式function sendMsg(){
首先需要創建一個容器來接受你編輯的內容，這里用span標簽，當然其他標簽也可
var oSpan=document.cerateElement(“span”)
將oSpan插入到需要展示的oVideoBox
oVideoBox.appendChild(oSpan)
給oSpan加入class用于編輯插入的樣式，當然也可以用js,這里用的CSS樣式oSpan.classList.add(“danmu”)
用innerHTML接用戶影像及彈幕內容這里用ES6的一個``
oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}
計算彈幕出現的初始位置，left位移初始位置即oVideoBox的寬度oVideoBox.offsetWidth.也是oSpan的初始定位oSpan.offsetLeft
top位移的初始即oVideoBox內隨機的高度，避免超出
var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight;
var top=Math.round(Math.random()*maxTop)
oSpan.style.top = top+ ‘px’
當然JS的影片也離不開計時器，這邊也是用setInterval()
var timer=setInterval(()=>{
var left=oSpan.offsetLeft
left-=10
oSpan.style.left= left+ ‘px’
這邊判斷一下如果超出螢屏就把彈幕和計時器移出
if(left<-oSpan.offsetWidtb){
clearInterval(timer);
oSpan.remove();}},100)
以上就完成了簡易版的彈幕函式就封裝完成了，后面就可以參考了， -
事件從點擊開始，彈幕也是創建點擊事件oSend.onclick,
oSend.οnclick=function(){參考函式sendMsg()} -
后面可以加上一個鍵盤的enter可以發送,是一個事件委托window.οnkeydοwn=function(e){
var ev = e || event;
var keyCode = ev.keyCode || ev.which;
判斷如果按的是鍵盤enter的keycode碼是13和alt組合
if (keyCode === 13 && ev.altKey) {
sendMsg();}}
以下是bod代碼，可以練練
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作業_彈幕</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}
.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}
.videoBox img {
width: 100%;
height: 100%;
}
video {
width: 100%;
/* height: 500px; */
}
.danmuSend {
display: flex;
height: 50px;
}
#content {
flex: 1;
}
#send {
width: 100px;
}
.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}
.danmu img {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrapBox">
<div class="videoBox">
<img src="../../source/bg.jpg" />
<!-- <span class="danmu">我是彈幕</span> -->
<!-- <span class="danmu">我是彈幕</span>
<span class="danmu">我是彈幕</span>
<span class="danmu">我是彈幕</span>
<span class="danmu">我是彈幕</span> -->
</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send">發送</button>
</div>
</div>
</body>
以下是JS的代碼：
<script>
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
function sendMsg() {
var content = oContent.value;
var oSpan = document.createElement('span');
oSpan.className = 'danmu';
oSpan.innerHTML = `<img src="../../source/bg.jpg">${content}`;
oVideoBox.appendChild(oSpan);
var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight;
oSpan.style.top = Math.round(Math.random() * maxTop) + 'px';
var timer = setInterval(() => {
var left = oSpan.offsetLeft;
left -= 10;
oSpan.style.left = left + 'px';
if (left < -oSpan.offsetWidth) {
clearInterval(timer);
oSpan.remove();
}
}, 100);
}
oSend.onclick = function () {
sendMsg();
}
window.onkeydown = function (e) {
var ev = e || event;
var keyCode = ev.keyCode || ev.which;
if (keyCode === 13 && ev.altKey) {
sendMsg();
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/210129.html
標籤：其他