JavaScript-realize the horizontal text barrage function

Show results: 

To realize the marquee/barrage effect of text, the main idea is:

js:

Define an array to store text information, define an array to store marquee playback information, define a method to add text information to playback information, and execute this method when the page is loaded.

If the array storing text information is empty, return;

If the array of playing information is greater than a certain number and the information being played is the last one of the text information, assign the array of playing information to be empty, that is, reset the playing array;

If the text information is not empty, add the text information to the playback information by traversing, and add a height attribute (the odd number is displayed on the second line, and the even number is displayed on the first line. This attribute can be used to set the dynamic height in the html structure), And set the added interval time;

Otherwise, after playing one round, re-execute the method

html：

Traverse the array of playback information and display the information on the page.

css：

Set the translation animation for the container displaying information, move the right side of the page to the left side of the page, and set the marquee style.

The specific code is as follows:

<template>
  <div
    style="
      overflow: hidden;
      position: relative;
      z-index: 2999;
      width: 750rpx;
      height: 200rpx;
      pointer-events: none;
      top: 0rpx;
    ">
    <div
      class="danmu-li rightToLeft"
      v-for="(item, id) in playList"
      :style="{
        'animation-iteration-count': 1, //播放次数
        'animation-delay': 2, //延迟时间
        animationDuration: duration + 's',
        top: item.top + 'rpx',
      }"
    >
      <div class="danmu-inner">
        <div class="user-box">
          <div class="user-img">
            <div class="img-box">
              <image></image>
            </div>
          </div>
          <div class="user-status cl1">
         {
   
   {item.msg}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
	this.add()
  },
  data() {
    return {
      palyId: 0,
      duration: 8, // 播放速度
      playList: [], //播放列表
      list: [{
			    id: 1,
			    msg: '玩家"这次一定中"获得魔王大礼包！1',
			  },
			  {
			    id: 2,
			    msg: '玩家"这次一定中"获得魔王大礼包！2',
			  },
		  	  {
			    id: 3,
			    msg: '玩家"这次一定中"获得魔王大礼包！3',
			},
			  {
			    id: 4,
			    msg: '玩家"这次一定中"获得魔王大礼包！4',
			  },
			],
    };
  },
  methods: {
    add() {
      if (this.list.length == 0) return;
      // 超过一定次数，重置
      if (this.playList.length > 100 && this.palyId == this.list.length - 1) {
        this.playList = [];
      }
      //添加播放列表
      var current = this.list[this.palyId] ? this.list[this.palyId] : "";
      if (current) {
        this.playList.push({
          ...current,
          top: this.palyId % 2 == 0 ? 80 : 0, //奇数第二行，偶数第一行，两行排列
        });
        setTimeout(() => {
          this.palyId++;
          this.add();
        }, (this.palyId % 2 == 0 ? 2 : 3) * 500); //上下两行的出现间隔
      } else {
        // 播完一轮
        this.palyId = 0;
        setTimeout(() => {
          this.add(); //重新播放
        }, 2000);
      }
    },
  },
};
</script>
<style lang="scss">
@keyframes rightToLeft {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.danmu-li {
  position: absolute;
  width: 100%;
  transform: translateX(100%);
  animation-timing-function: linear;

  &.rightToLeft {
    animation-name: rightToLeft;
  }

  .danmu-inner {
    display: inline-block;

    .user-box {
      display: flex;
      padding: 3rpx 40rpx 3rpx 10rpx;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 32rpx;
      align-items: center;

      .user-img {
        .img-box {
          display: flex;
          image {
            width: 58rpx;
            height: 58rpx;
            background: rgba(55, 55, 55, 1);
            border-radius: 50%;
            position: relative;
            left: -10rpx;
          }
        }
      }

      .user-status {
        margin-left: 10rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 700rpx; // 最大宽度
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>