成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS彈幕實(shí)現(xiàn)

susheng / 1990人閱讀

摘要：原文鏈接實(shí)現(xiàn)原理設(shè)置展示彈幕元素位置屬性為動(dòng)態(tài)創(chuàng)建彈幕元素，位置屬性設(shè)置，為展示寬度隨機(jī)設(shè)置彈幕元素值隨機(jī)產(chǎn)生彈幕元素移動(dòng)速率，修改值隨機(jī)顏色第一種實(shí)現(xiàn)第二種實(shí)現(xiàn)第三種實(shí)現(xiàn)隨機(jī)速率代碼發(fā)送彈幕前端框架測(cè)試彈幕效果效果

基于直播平臺(tái)的流行，利用原生實(shí)現(xiàn)一下彈幕效果。

原文鏈接

實(shí)現(xiàn)原理

1、設(shè)置展示彈幕元素位置屬性為relative
2、動(dòng)態(tài)創(chuàng)建彈幕元素，位置屬性設(shè)置absolute，left為展示寬度
3、隨機(jī)設(shè)置彈幕元素top值
4、隨機(jī)產(chǎn)生彈幕元素移動(dòng)速率，修改left值

隨機(jī)顏色 
第一種實(shí)現(xiàn)
let color = "#" + Math.floor(Math.random() * 0xffffff).toString(16);

第二種實(shí)現(xiàn)
let color = "#" + Math.floor(Math.random() * 256).toString(10);

第三種實(shí)現(xiàn)
let r = Math.floor(Math.random()*256);
let g = Math.floor(Math.random()*256);
let b = Math.floor(Math.random()*256);
let color = `rgb(${r},${g},$)`;
隨機(jī)速率 
50 * +Math.random().toFixed(2)
代碼 
//html


    

    

        

        

            
            
        

    




//css
* {
    box-sizing: border-box;
    outline: none;
}

p {
    margin: .5em;
    word-break: break-all;
}

.container {
    position: relative;
    width: 700px;
    height: 500px;
    margin: auto;
    padding-right: 200px;
}

.content {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}

.content-opt {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
}

.content-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border: 1px solid #ccc;
    overflow: auto;
}

.content-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
}

.content-input input {
    width: 70%;
    padding: 2px;
    border-radius: 5px;
}

.content-input button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: rgb(90, 154, 214);
}

//js
(function () {
    class Barrage {
        constructor(id) {
            this.domList = [];
            this.dom = document.querySelector("#" + id);
            if (this.dom.style.position == "" || this.dom.style.position == "static") {
                this.dom.style.position = "relative";
            }
            this.dom.style.overflow = "hidden";
            let rect = this.dom.getBoundingClientRect();
            this.domWidth = rect.right - rect.left;
            this.domHeight = rect.bottom - rect.top;
        }

        shoot(text) {
            let div = document.createElement("div");
            div.style.position = "absolute";
            div.style.left = this.domWidth + "px";
            div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + "px";
            div.style.whiteSpace = "nowrap";
            div.style.color = "#" + Math.floor(Math.random() * 256).toString(10);
            div.innerText = text;
            this.dom.appendChild(div);

            let roll = (timer) => {
                let now = +new Date();
                roll.last = roll.last || now;
                roll.timer = roll.timer || timer;
                let left = div.offsetLeft;
                let rect = div.getBoundingClientRect();
                if (left < (rect.left - rect.right)) {
                    this.dom.removeChild(div);
                } else {
                    if (now - roll.last >= roll.timer) {
                        roll.last = now;
                        left -= 3;
                        div.style.left = left + "px";
                    }
                    requestAnimationFrame(roll);
                }
            }
            roll(50 * +Math.random().toFixed(2));
        }

    }

    let barage = new Barrage("content");

    function appendList(text) {
        let p = document.createElement("p");
        p.innerText = text;
        document.querySelector("#content-text").appendChild(p);
    }

    document.querySelector("#send").onclick = () => {
        let text = document.querySelector("#text").value;
        barage.shoot(text);

        appendList(text);
    };

    const textList = ["彈幕", "666", "233333333", "javascript", "html", "css", "前端框架", "Vue", "React", "Angular",
        "測(cè)試彈幕效果"
    ];
    textList.forEach((s) => {
        barage.shoot(s);
        appendList(s);
    })
})()
效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89254.html

相關(guān)文章

  • Canvas + WebSocket + Redis 實(shí)現(xiàn)一個(gè)視頻彈幕

    摘要：創(chuàng)建彈幕功能的類及基本參數(shù)處理布局時(shí)需要注意的默認(rèn)寬為，高為，我們要保證完全覆蓋整個(gè)視頻，需要讓與寬高相等。因?yàn)槲覀儾淮_定每一個(gè)使用該功能的視頻的寬高都是一樣的，所以畫布的寬高并沒有通過來設(shè)置，而是通過在類創(chuàng)建實(shí)例初始化屬性的時(shí)候動(dòng)態(tài)設(shè)置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 閱讀原文 頁(yè)面布...

    WelliJhon 評(píng)論0 收藏0

  • Canvas + WebSocket + Redis 實(shí)現(xiàn)一個(gè)視頻彈幕

    摘要：創(chuàng)建彈幕功能的類及基本參數(shù)處理布局時(shí)需要注意的默認(rèn)寬為，高為，我們要保證完全覆蓋整個(gè)視頻，需要讓與寬高相等。因?yàn)槲覀儾淮_定每一個(gè)使用該功能的視頻的寬高都是一樣的，所以畫布的寬高并沒有通過來設(shè)置，而是通過在類創(chuàng)建實(shí)例初始化屬性的時(shí)候動(dòng)態(tài)設(shè)置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 閱讀原文 頁(yè)面布...

    gekylin 評(píng)論0 收藏0

  • Canvas + WebSocket + Redis 實(shí)現(xiàn)一個(gè)視頻彈幕

    摘要：創(chuàng)建彈幕功能的類及基本參數(shù)處理布局時(shí)需要注意的默認(rèn)寬為，高為，我們要保證完全覆蓋整個(gè)視頻，需要讓與寬高相等。因?yàn)槲覀儾淮_定每一個(gè)使用該功能的視頻的寬高都是一樣的，所以畫布的寬高并沒有通過來設(shè)置，而是通過在類創(chuàng)建實(shí)例初始化屬性的時(shí)候動(dòng)態(tài)設(shè)置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 閱讀原文 頁(yè)面布...

    wangdai 評(píng)論0 收藏0

  • 彈幕，是怎樣練成的？

    showImg(https://segmentfault.com/img/bVbk1Nl?w=1080&h=602); 說起彈幕看過視頻的都不會(huì)陌生，那滿屏充滿著飄逸評(píng)論的效果，讓人如癡如醉，無法自拔 最近也是因?yàn)樵趯W(xué)習(xí)關(guān)于 canvas 的知識(shí)，所以今天就想和大家分享一個(gè)關(guān)于彈幕的故事 那么究竟彈幕是怎樣煉成的呢？ 我們且往下看(look) 看什么？看效果 showImg(https://s...

    lwx12525 評(píng)論0 收藏0

  • 50行代碼搞定彈幕效果

    摘要：根據(jù)指定內(nèi)容生成彈幕，并初始化其位置以及其樣式，插入中。最終完整版代碼彈幕定時(shí)器控制彈幕顯隱變量監(jiān)聽發(fā)送按鈕創(chuàng)建彈幕添加定時(shí)任務(wù)監(jiān)聽關(guān)閉彈幕按鈕新建一個(gè)彈幕為彈幕添加定時(shí)任務(wù)最終效果圖快給自己刷波吧 前言 就在最近這幾年，彈幕這個(gè)東西慢慢地流行了起來。我們?cè)诰W(wǎng)上看視頻或者看直播都能見到彈幕的身影，有時(shí)候彈幕的內(nèi)容甚至比視頻本身內(nèi)容還要精彩。本人也是很喜歡彈幕這個(gè)東西，看到精彩處刷個(gè)彈幕...

    sixgo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<