快捷導(dǎo)航

原生JS實現(xiàn)彈幕效果的簡單操作指南

更新時間：2020年11月10日 12:05:45 作者：表演者7號

這篇文章主要給大家介紹了關(guān)于原生JS實現(xiàn)彈幕效果的簡單操作指南，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

現(xiàn)在很多的直播平臺或者視頻平臺都會用到彈幕加強(qiáng)和觀眾的互動效果，那么如何用JS實現(xiàn)這樣的效果呢，用一個初學(xué)者的方法記錄下這個方法，歡迎大牛指導(dǎo)。

1、首先需要操作文檔必須拿到Dom中的元素，當(dāng)然有很多方法，這里還是用document.querySelector.

2、這邊也是為了鍵盤和鼠標(biāo)都可發(fā)送封裝了一個函數(shù)function sendMsg(){

首先需要創(chuàng)建一個容器來接受你編輯的內(nèi)容，這里用span標(biāo)簽，當(dāng)然其他標(biāo)簽也可

var oSpan=document.cerateElement(“span”)

將oSpan插入到需要展示的oVideoBox

oVideoBox.appendChild(oSpan)

給oSpan加入class用于編輯插入的樣式，當(dāng)然也可以用js,這里用的CSS樣式oSpan.classList.add(“danmu”)

用innerHTML接用戶圖像及彈幕內(nèi)容這里用ES6的一個``

oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}

計算彈幕出現(xiàn)的初始位置，left位移初始位置即oVideoBox的寬度oVideoBox.offsetWidth.也是oSpan的初始定位oSpan.offsetLeft
top位移的初始即oVideoBox內(nèi)隨機(jī)的高度，避免超出

var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight;
var top=Math.round(Math.random()*maxTop)
oSpan.style.top = top+ ‘px'

當(dāng)然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)

以上就完成了簡易版的彈幕函數(shù)就封裝完成了，后面就可以引用了，

事件從點擊開始，彈幕也是創(chuàng)建點擊事件oSend.onclick,

oSend.οnclick=function(){引用函數(shù)sendMsg()}

后面可以加上一個鍵盤的enter可以發(fā)送,是一個事件委托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>作業(yè)_彈幕</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">發(fā)送</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>

總結(jié)

到此這篇關(guān)于原生JS實現(xiàn)彈幕效果的文章就介紹到這了,更多相關(guān)原生JS實現(xiàn)彈幕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: