Vue实现走马灯效果，适用于音乐播放器，歌曲歌名或作者名太长自动滚动的效果

目录

效果图片

首先来看看HTML代码片段和data参数

HTML代码片段

 data参数

CSS与JS函数配合，实现效果

CSS片段

JS函数实现动态设置跑马灯效果

结尾

---

效果图片

---

首先来看看HTML代码片段和data参数

HTML代码片段

 <!-- 歌曲名称和艺术家 -->
    <div class="songNameAndArtist">
      <div class="songname" id="songname" :text="music.name">
        {{ music.name }}
      </div>
      <div class="artist" id="artist" :text="music.artist">
        {{ music.artist }}
      </div>
    </div>

 data参数

 data() {
    return {
      // 音乐模块相关信息
      music: {      
        // 音乐名称
        name: 'Drive You Home',
        // 音乐创作者
        artist: '王嘉尔',     
      },
    }
  },

CSS与JS函数配合，实现效果

CSS片段

.songNameAndArtist {
  width: 150px;
  overflow: hidden;
  padding: 12px 6px;

  // 以下代码为跑马灯效果
  > div {
    position: relative;
    left: -15px;
    padding-left: 16px;
    width: fit-content;
    white-space: nowrap;
  }
  > div:hover::after {
    position: absolute;
    right: -100%;
    content: attr(text);
  }
  > div.change:hover::after {
    content: '';
  }
  > div:hover {
    animation: move linear infinite normal;
  }
  @keyframes move {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  > .songname {
    margin-top: 6px;
    margin-bottom: 6px;
    color: #5f6464;
  }
  > .artist {
    color: #768181;
    font-size: 13.6px;
  }
}

div标签的宽度要用fit-content属性，用来定义宽度为文本长度，否则translateX的就不是文本长度而是原本p元素的长度。 

left 以及 padding-left 是为了文字循环播放的更加流畅

伪元素after用来成为 走马灯的循环文字，内容是用attr函数来获取文本。

JS函数实现动态设置跑马灯效果

    // 设置跑马灯所需时间
    animationDuration(id) {
      const el = document.getElementById(id)

      // 当文字长度小于 140px 时，跑马灯效果失效
      if (el.offsetWidth < 140) {
        el.style.animationDuration = '0s'
        el.classList.add('change')
        return
      }

    
      el.classList.remove('change')
      let time = el.offsetWidth / 50 + 's'
      // console.log(time)
      el.style.animationDuration = time
    },

    // 在生命周期函数中调用 animationDuration()函数
    mounted() {
        this.animationDuration('songname')
        this.animationDuration('artist')
    },

当文字长度小于 140 时，此时文字可以完整的展示出来，就没必要进行循环播放了。

当文字长度大于 140 时，基于长度计算播放时间，使得走马灯播放速度达到相对平衡，不会太快也不会太慢

结尾

当歌曲信息被更新时，可同时调用 animationDuration()函数 ，以达到对歌曲名称和歌手信息进行动态设置跑马灯效果