在做音乐播放器时,需要对歌词进行滚动处理
需要歌词同步都是在中间,如何达到这种效果呢?
使用jQuery方便操作Dom
关键步骤
- 将每句歌词用li标签包起来,放入ol 或 ul标签中(语义化)
- 设置需要显示歌词的ol(ul)标签的宽高
- ol(ul)标签 css样式使用
overflow: auto; - 计算出ol标签的中间位置的高度center
- 将歌词第一句移动到中间位置:
$("ul").css("padding-top",center) - 计算出当前歌词距离容器顶部高度
let top = $("ul").scrollTop()-($("ul").offset().top-currentLyric.offset().top) - center或者使用DOM属性let top = currentLyric[0].offsetTop - $("ul")[0].offsetTop - center - 移动当前歌词
$("ul").animate({scrollTop: top})
jQuery函数
scrollTop()
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效
offset()
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效
DOM属性
offsetTop
HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。