首页 / js教程

    用JS代码做出弹幕效果

    类型:原创      发布者:php中世界最好的语言2018-03-13 16:37:33

    这次给大家带来用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('#' + 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() * 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 + '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',        '测试弹幕效果'
        ];
        textList.forEach((s) => {
            barage.shoot(s);
            appendList(s);
        })
    })()

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

    推荐阅读:

    用H5的canvas做出弹幕效果

    用H5的canvas做恐怖动画

    以上就是用JS代码做出弹幕效果的详细内容,更多请关注php中文网其它相关文章!

php中文网赞助会员

PHP中文网

未登录