vue 文字跑马灯效果演示

<template>
  <div id="app" align="center">
    <span @mouseenter="start" v-on:mouseout="stop">{{ text }}</span>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
        text: "最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置"+"~~~~~~~~~~~~~~~",
        ID: null,
      }
    },
    methods: {
      // 开始滚动
      start() {
        this.ID = setInterval(() => {
          // 截取首个字符
          var head = this.text.substring(0, 1);
          // 截取除首个字符外的所有字符
          var foot = this.text.substring(1);
          // 拼接后重新渲染text属性值
          this.text = foot + head;
        }, 400);

      },
      // 停止滚动
      stop(){
        // 清除定时器
        clearInterval(this.ID);
      }
    },

  }
</script>


<style scoped >
  #app{
    width: 400px;
    height: 20px;
    background-color: yellow;
    overflow: hidden;
  }
  span {
    font-size: 16px;
    color: red;
    border: 1px solid #cccccc;
    /*overflow: auto;*/
    /*overflow-x: hidden;*/
  }
</style>