位置: 编程技术 - 正文
推荐整理分享利用jquery实现实时更新歌词的方法(使用jquery),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:使用jquery实现的项目,使用jquery的步骤,使用jquery的步骤,jquery实战,jquery的实现原理,使用jquery,jquery的实现原理,jquery实例,内容如对您有帮助,希望把文章链接给更多的朋友!
前言
最近自己写了个移动端音乐播放器,用了很多框架,也踩了很多坑,感觉比较复杂的就是计算歌词实时播放了,所以想着大概给整理了一下,分享出来,有问题的话朋友们可以指出,有需要的朋友们也可以学习学习。
布局
(歌词都是后台数据获取,方便理解我把所有歌词都一一列出来)
注意 : 给每一句歌词都自定义两个属性,data-play属性为了计算什么时候显示该句歌词,它的属性值audio-t- “num” 是表示这句歌词在num秒的时候高亮显示; data-index为了计算什么时候歌词往上走,就按顺序定义就行。
以下是静态效果图:
(效果图没有歌词是因为左滑才出现歌词)
左滑出现歌词
歌词出现:
重点来了
效果如下:
总结
标签: 使用jquery
本文链接地址:https://www.jiuchutong.com/biancheng/374053.html 转载请保留说明!友情链接: 武汉网站建设