竖向滚屏和横向飘屏

竖向滚屏，这边是需要提前写css样式，如果不想这么麻烦就是下面的横向写法自动写styledom再append

function Walk({
    selector,
    speed = 1,
    data = [],
    danweiLucheng,

}) {
    this.dom = document.querySelector(selector);
    this.data = data;
    this.speed = speed;
    this.danweiLucheng = danweiLucheng;
    this.timer = null;
    this.init();
    this.render();
};
Walk.prototype.render = function () {
    let htmlStr = '';
    this.data.concat(this.data[0]).forEach(d => {
        htmlStr += `<div class="walking-item">
                        <div class="walking-text">${d.message}</div>
                        <img class="walking-img"
                            src="${d.icon}">
                    </div>`;
    });
    this.dom.innerHTML = htmlStr;
};
Walk.prototype.init = function () {
    this.index = 0;
    this.lucheng = 0;
    this.storeLucheng = 0;
};
Walk.prototype.playFrame = function () {
    setTimeout(() => {

        this.lucheng = this.storeLucheng;
        this.timer = setInterval(() => {
            this.lucheng += this.speed;
            this.dom.style.transform = `translate3d(0, -${this.lucheng}px, 0)`;
            if (this.lucheng - this.storeLucheng >= this.danweiLucheng) {
                this.index++; //第一个动画结束，index下标下移
                this.storeLucheng = this.lucheng;
                if (this.index >= this.data.length) {
                    this.dom.style.transform = 'translate3d(0, 0, 0)';
                    this.init();
                }
                clearInterval(this.timer);
                this.playFrame();
            }

        }, 20)
    }, 1500)
};

横向飘飘类似弹幕

; (function () {
    var Danmaku = window.Danmaku = function ({
        selector,
        data = [],
        speed = 1,
        itemWidth = 180,
        itemHeigth = 30,
        spaceWidth = 50,
    }) {
        this.dom = document.querySelector(selector);
        this.data = data;
        this.speed = speed;
        this.itemWidth = itemWidth;
        this.itemHeigth = itemHeigth;
        this.offsetWidth = this.data.length * this.itemWidth + (this.data.length - 1) * spaceWidth;
        this.currentOffset = this.initOffset = window.innerWidth;
        this.spaceWidth = spaceWidth;
        this.init();
        this.render();
    }
    Danmaku.prototype.init = function () {
        this.currentOffset = this.initOffset;
        this.dom.style.cssText = `width:${this.offsetWidth}px;display:flex;background:transparent;transform:translate3d(${this.initOffset}px,0,0)`;
    }
    Danmaku.prototype.render = function () {
        let htmlStr = '';
        let styleDom = document.createElement('style');
        styleDom.innerHTML = `
            .danmaku-item{
                width:${this.itemWidth}px;
                line-height:${this.itemHeigth}px;
                display:flex;
                font-size: 12px;
                color: #fff;
                background: rgba(0, 0, 0, 0.7);
                border-radius: ${this.itemHeigth / 2}px;
                align-items: center;
                margin-right: ${this.spaceWidth}px;
                padding: 0 10px;
            }
            .danmaku-item:nth-child(odd){
                transform:translate3d(0,${this.itemHeigth / 3}px,0);
            }
            .danmaku-item:nth-child(even){
                transform:translate3d(0,-${this.itemHeigth / 3}px,0);
            }
            .danmaku-text{
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
            }
            .danmaku-img{
                width: 26px;
                height: 26px;
                border-radius: 13px;
                object-fit: contain;
                margin-right: 10px;
            }
            `;
        document.head.appendChild(styleDom);
        this.data.forEach(d => {
            htmlStr += `<div class="danmaku-item">
                            <img class="danmaku-img" src="${d.icon}">
                            <div class="danmaku-text">${d.time} 获得了星耀款</div>
                        </div>`;
        });
        this.dom.innerHTML = htmlStr;
    };
    Danmaku.prototype.playFrame = function () {
        this.currentOffset -= this.speed;
        this.dom.style.transform = `translate3d(${this.currentOffset}px,0,0)`;
        if (this.currentOffset <= -this.offsetWidth) {
            this.init();
        }
        requestAnimationFrame(() => {
            this.playFrame();
        })
    }

})();