JavaScript-实现横向文字弹幕功能

效果展示： 

实现文字的跑马灯/弹幕效果，主要思路为：

js中：

定义一个数组存放文字信息，定义一个数组存放跑马灯播放信息，定义一个将文字信息添加至播放信息的方法，当页面加载时，执行该方法，

如果存放文字信息的数组为空时，返回；

如果播放信息的数组大于一定的数量且正在播放的信息为文字信息的最后一个，将播放信息数组赋值为空，即重置播放数组；

如果文字信息不为空，通过遍历将文字信息添加至播放信息中，并添加高度属性（奇数显示在第二行，偶数显示在第一行，该属性在html结构中可用于设置动态高度），并设置添加的间隔时间；

否则，即播放完毕一轮，重新执行该方法

html：

遍历播放信息的数组，将信息展示在页面中。

css：

给展示信息的容器设置平移动画，右页面右方移动至页面左方，并设置跑马灯样式。

具体代码如下：

<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>