利用原生js模擬直播彈幕滾動(dòng)效果

目錄

1、基本原理

首先將直播區域分成十份（我個(gè)人自己為了便于計算分成十份），將輸入的內容隨機放到分成的十份區域中，插入到十份區域右邊的視圖之外，然后調用動(dòng)畫(huà)，按照隨機的速度從右向左移動(dòng)，當移動(dòng)到左側區域視圖之外移除此滾動(dòng)元素。

2、具體代碼

<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");//側邊聊天欄
let videoView = document.getElementById("video_view");//視頻區域
let videoWidth = videoView.offsetWidth;//直播區域的總寬度
let listHeight = videoView.offsetHeight/10;//每一層直播區域的高度
let listTopNum = [0,1,2,3,4,5,6,7,8,9];//將直播區域的高度分成10層
document.getElementById("send_btn").addEventListener("click",function(){//監聽(tīng)發(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)畫(huà)
}
let animateType = {
    'normal':5,
    'fast':10,
    'faster':15
}
function Animate(dom,speed){//滾動(dòng)動(dòng)畫(huà)
    let domWidth = dom.offsetWidth;//當前彈幕元素的寬度
    let distance = videoWidth;//直播區域的總寬度
    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)出屏幕的標簽
            }
    },50)
}

根據直播區域分成的十份（listTopNum），獲取每一層區域的高度（listHeight），然后改變滾動(dòng)標簽的top實(shí)現插入到十份中的不同區域。

創(chuàng )建一個(gè)滾動(dòng)標簽就創(chuàng )建一個(gè)滾動(dòng)動(dòng)畫(huà)（函數Animate），默認速度是normal，每次創(chuàng )建動(dòng)畫(huà)都會(huì )隨機傳入一個(gè)隨機速度類(lèi)型（normal、fast、faster），按照傳入的速度類(lèi)型來(lái)改變每次滾動(dòng)減去的距離大小，實(shí)現不同的滾動(dòng)速度。

總結

這是個(gè)人閑著(zhù)無(wú)事一時(shí)興起寫(xiě)的一個(gè)直播滾動(dòng)動(dòng)畫(huà)，如果加上WebSocket就能實(shí)現多人同步通信，這個(gè)以后無(wú)事再做完善。

具體代碼請訪(fǎng)問(wèn)[：…]下載下來(lái)就能直接看效果。

到此這篇關(guān)于利用原生js模擬直播彈幕滾動(dòng)效果的文章就介紹到這了,更多相關(guān)js模擬直播彈幕滾動(dòng)內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！