您好,登錄后才能下訂單哦!
這篇文章主要講解了“如何利用原生js模擬直播彈幕滾動(dòng)效果”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“如何利用原生js模擬直播彈幕滾動(dòng)效果”吧!
1、基本原理
2、具體代碼
總結(jié)
首先將直播區(qū)域分成十份(我個(gè)人自己為了便于計(jì)算分成十份),將輸入的內(nèi)容隨機(jī)放到分成的十份區(qū)域中,插入到十份區(qū)域右邊的視圖之外,然后調(diào)用動(dòng)畫,按照隨機(jī)的速度從右向左移動(dòng),當(dāng)移動(dòng)到左側(cè)區(qū)域視圖之外移除此滾動(dòng)元素。
<div class="move_video_content"> <div class="video_content"> <div class="video_div" id="video_view"></div> <div class="scroll_content"> <ul class="scroll_ul" id="scroll_ul_id"></ul> </div> </div> <div class="input_content"> <input type="text" class="input_text" maxlength="30" placeholder="請輸入要發(fā)送的彈幕" id="input_text_id"> <button type="button" class="button_btn" id="send_btn">發(fā)送</button> </div> </div>
具體效果如下:
js代碼如下
let inputText = document.getElementById("input_text_id");//input輸入框 let scrollContent = document.getElementById("scroll_ul_id");//側(cè)邊聊天欄 let videoView = document.getElementById("video_view");//視頻區(qū)域 let videoWidth = videoView.offsetWidth;//直播區(qū)域的總寬度 let listHeight = videoView.offsetHeight/10;//每一層直播區(qū)域的高度 let listTopNum = [0,1,2,3,4,5,6,7,8,9];//將直播區(qū)域的高度分成10層 document.getElementById("send_btn").addEventListener("click",function(){//監(jiān)聽發(fā)送按鈕 let value = inputText.value;//獲取輸入框的值 if(!value) return; appendDom(value);//將輸入框的值插入到滾動(dòng)聊天中 createVideoBulletChatDom(value);//將輸入框的值插入到彈幕中 inputText.value = '';//清空輸入框 scrollContent.scrollTop = scrollContent.scrollHeight;//自動(dòng)滾動(dòng)到底部 }) function appendDom(value){//將輸入框的值插入到滾動(dòng)聊天中 let li = document.createElement("li"); li.setAttribute("class","scroll_li"); li.innerHTML = value; scrollContent.appendChild(li); } let speedArr = ['normal','fast','faster']; function createVideoBulletChatDom(value){//將輸入框的值插入到彈幕中 let num = listTopNum[Math.floor((Math.random()*listTopNum.length))]; let p = document.createElement("p"); p.setAttribute("class","video_p"); p.style.top = (num * 60) + "px"; p.style.left = videoWidth + "px"; p.innerHTML = value; videoView.appendChild(p); let speed = speedArr[Math.floor((Math.random()*speedArr.length))]; Animate(p,speed);//滾動(dòng)動(dòng)畫 } let animateType = { 'normal':5, 'fast':10, 'faster':15 } function Animate(dom,speed){//滾動(dòng)動(dòng)畫 let domWidth = dom.offsetWidth;//當(dāng)前彈幕元素的寬度 let distance = videoWidth;//直播區(qū)域的總寬度 speed ? speed : 'normal'; let interval = animateType[speed] let timer = setInterval(function(){ distance -= interval; dom.style.left = distance + 'px'; if(distance <= -domWidth){ clearInterval(timer); videoView.removeChild(dom);//清除已經(jīng)滾動(dòng)出屏幕的標(biāo)簽 } },50) }
根據(jù)直播區(qū)域分成的十份(listTopNum),獲取每一層區(qū)域的高度(listHeight),然后改變滾動(dòng)標(biāo)簽的top實(shí)現(xiàn)插入到十份中的不同區(qū)域。
創(chuàng)建一個(gè)滾動(dòng)標(biāo)簽就創(chuàng)建一個(gè)滾動(dòng)動(dòng)畫(函數(shù)Animate),默認(rèn)速度是normal,每次創(chuàng)建動(dòng)畫都會隨機(jī)傳入一個(gè)隨機(jī)速度類型(normal、fast、faster),按照傳入的速度類型來改變每次滾動(dòng)減去的距離大小,實(shí)現(xiàn)不同的滾動(dòng)速度。
這是個(gè)人閑著無事一時(shí)興起寫的一個(gè)直播滾動(dòng)動(dòng)畫,如果加上WebSocket就能實(shí)現(xiàn)多人同步通信,這個(gè)以后無事再做完善。
具體代碼請?jiān)L問[:github.com/liqc-wwl/bu…]下載下來就能直接看效果。
感謝各位的閱讀,以上就是“如何利用原生js模擬直播彈幕滾動(dòng)效果”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對如何利用原生js模擬直播彈幕滾動(dòng)效果這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。