jquery歌词滚动字幕

可以使用以下代码实现jQuery歌词滚动字幕：

HTML代码：

<div id="lyrics">
  <ul>
    <li>Verse 1: Lorem ipsum dolor sit amet</li>
    <li>Chorus: Consectetur adipiscing elit</li>
    <li>Verse 2: Sed do eiusmod tempor incididunt</li>
    <li>Chorus: Ut labore et dolore magna aliqua</li>
  </ul>
</div>

CSS代码：

#lyrics {
  height: 100px;
  overflow: hidden;
}

#lyrics ul {
  margin: 0;
  padding: 0;
}

#lyrics li {
  font-size: 24px;
  line-height: 1.5;
  white-space: nowrap;
  margin: 0;
  padding: 10px 0;
}

jQuery代码：

$(function() {
  var lyricHeight = $('#lyrics li:first-child').outerHeight();
  $('#lyrics li:first-child').addClass('active');
  setInterval(function() {
    var currentLyric = $('#lyrics li.active');
    var nextLyric = currentLyric.next();
    if (nextLyric.length) {
      $('#lyrics').animate({
        scrollTop: '+=' + lyricHeight + 'px'
      }, 500);
      nextLyric.addClass('active');
      currentLyric.removeClass('active');
    }
  }, 2000);
});

这段代码会每隔2秒钟滚动一个歌词，并且在滚动时添加一个类名为“active”的样式，以突出显示当前正在唱的歌词。