首页 > 文章 > web前端 > 用JS代码做出弹幕效果

用JS代码做出弹幕效果

php中世界最好的语言原创: 2018-03-13 16:37:333490浏览

这次给大家带来用JS代码做出弹幕效果，用JS代码做出弹幕效果的注意事项有哪些，下面就是实战案例，一起来看一下。

实现原理

1、设置展示弹幕元素位置属性为relative
2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度
3、随机设置弹幕元素top值
4、随机产生弹幕元素移动速率，修改left值

随机颜色

第一种实现let color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);

第二种实现let color = '#' + Math.floor(Math.random() * 16777215).toString(16)；

第三种实现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},${b})`;

随机速率

50 * +Math.random().toFixed(2)

代码

//html

<div class="container">
    <div id="content" class="content"></div>
    <div class="content-opt">
        <div id="content-text" class="content-text"></div>
        <div class="content-input">
            <input id="text" type="text">
            <button id="send">发送</button>
        </div>
    </div>
</div>

//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(&#39;#&#39; + id);            if (this.dom.style.position == &#39;&#39; || this.dom.style.position == &#39;static&#39;) {
                this.dom.style.position = &#39;relative&#39;;
            }
            this.dom.style.overflow = &#39;hidden&#39;;            let rect = this.dom.getBoundingClientRect();
            this.domWidth = rect.right - rect.left;
            this.domHeight = rect.bottom - rect.top;
        }
        shoot(text) {            let div = document.createElement(&#39;div&#39;);
            div.style.position = &#39;absolute&#39;;
            div.style.left = this.domWidth + &#39;px&#39;;
            div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + &#39;px&#39;;
            div.style.whiteSpace = &#39;nowrap&#39;;
            div.style.color = &#39;#&#39; + Math.floor(Math.random() * 0xffffff).toString(16);
            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 + &#39;px&#39;;
                    }
                    requestAnimationFrame(roll);
                }
            }
            roll(50 * +Math.random().toFixed(2));
        }
    }    let barage = new Barrage(&#39;content&#39;);    function appendList(text) {        let p = document.createElement(&#39;p&#39;);
        p.innerText = text;
        document.querySelector(&#39;#content-text&#39;).appendChild(p);
    }
    document.querySelector(&#39;#send&#39;).onclick = () => {        let text = document.querySelector(&#39;#text&#39;).value;
        barage.shoot(text);
        appendList(text);
    };
    const textList = [&#39;弹幕&#39;, &#39;666&#39;, &#39;233333333&#39;, &#39;javascript&#39;, &#39;html&#39;, &#39;css&#39;, &#39;前端框架&#39;, &#39;Vue&#39;, &#39;React&#39;, &#39;Angular&#39;,        &#39;测试弹幕效果&#39;
    ];
    textList.forEach((s) => {
        barage.shoot(s);
        appendList(s);
    })
})()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！