vue 如何做音乐播放器中的歌词滚动?-灵析社区

如果只是用来做练手的话，可以使用一个几乎没人用的HTML元素<marquee>，通过用下一句开始时间 - 当前句开始时间得到歌词跑完一次所需要的时间，将这个值设置给<marquee>元素，通过不断替换<marquee>元素实现歌词切换，而至于滚动这个元素会自己实现，而且由于设置了循环时间 = 下句开始时间 - 这句开始时间，所以歌词跑完正好是换下一句歌词的时候 如果你是要实现上下滚动的话，用<marquee>就没办法灵活的设置滚动速度了（因为左右滚动完可以直接替换元素实现切换滚动速率，但是上下滚动的话，由于相邻两句速率不一定一样，比如第一句10秒放完，第二句5秒放完，那么，就需要将第1行字的高度，平摊在10秒内滚动完，第二句高度，平摊在5秒内滚动完），所以在这种情况下，建议用类似轮播图的实现思路： 外层是一个歌词框（溢出部分隐藏） 内层是一个包裹框，可以用<ul>实现 然后里面一句歌词对应一个<li> 通过下一句开始时间 - 这句开始时间得到这句运行时间，然后用JS获取当前li元素的高度，将这个高度平均到这段时间内做平滑动画，动画只修改元素的top，建议使用jQuery实现 大致代码（只是写了个实现思路不一定可以运行）HTML: <div class="lyric"> <ul> <li>歌词第一行</li> <li>歌词第二行</li> ... </ul> </div> CSS: .lyric { width: 400px; height: 500px; position: relative; overflow: hidden; } .lyric ul { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 0; } .lyric ul li { list-item-style: none; } JS: // 下面示例即为移动一句歌词的demo，这里就用X表示歌词对应的li的jQuery选择器 // 用timeGap表示这句歌词对应的滚动时间 var lyricHeight = X.height(); $('.lyric ul').animate({'top': '-' + lyricHeight + 'px'}, timeGap); // 直接对ul上边距做-lyricHeight像素的偏移，动画时间为timeGap毫秒