JS实现歌词滚动

2,354 阅读1分钟

在做音乐播放器时,需要对歌词进行滚动处理
需要歌词同步都是在中间,如何达到这种效果呢?
image.png
使用jQuery方便操作Dom

关键步骤

  1. 将每句歌词用li标签包起来,放入ol 或 ul标签中(语义化)
  2. 设置需要显示歌词的ol(ul)标签的宽高
  3. ol(ul)标签 css样式使用overflow: auto;
  4. 计算出ol标签的中间位置的高度center
  5. 将歌词第一句移动到中间位置:$("ul").css("padding-top",center)
  6. 计算出当前歌词距离容器顶部高度 let top = $("ul").scrollTop()-($("ul").offset().top-currentLyric.offset().top) - center或者使用DOM属性let top = currentLyric[0].offsetTop - $("ul")[0].offsetTop - center
  7. 移动当前歌词$("ul").animate({scrollTop: top})

jQuery函数

scrollTop()

获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效

offset()

获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效

DOM属性

offsetTop

HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

示例

jsfiddle.net/wayaya/3hae…