$('figure').on("swipeLeft" , function(){ $('figure').css('display' , 'none'); $('.lyric').css('display' , 'block').addClass("animated slideInRight"); }) $('.lyric').on("swipeRight" , function(){ $('.lyric').css('display' , 'none'); $('figure').css('display' , 'block').addClass("animated slideInLeft"); })
歌词出现：
重点来了
function lyricPlay(){ var timer2; var $cur = null; var $lrcbox = $(".lrc-list"); $lrcwrap = $lrcbox.parent(); clearInterval(timer2); timer2 = setInterval( function(){ var time = Math.ceil( $('audio')[0].currentTime); //currentTime 是获取音乐实时播放时间 $cur = $("audio-t-"+time).selector;//拿到自定义属性data-play $('p' , $lrcbox ).each(function(){ //循环拿到p var playT = $(this).data('play');//当前播放元素属性值 if( playT == $cur ){ //给符合条件歌词加上高亮并删除兄弟元素的class名 $(this).stop().addClass('acitve').siblings().removeClass('acitve'); }else{ return; } var index = $(this).data("index"); //当前元素下标 var lineHeight =$(this).height() ; //一行歌词高度 var boxHeight = $lrcwrap.height(); //歌词显示区域高度 var screensize = boxHeight / lineHeight; //一屏显示多少句歌词 var half = Math.floor(screensize / 2); //半屏歌词数量 //当前歌词超过半屏 if(index > half){ //计算出超过的高度 减去 一行歌词的高度 var top = (half - index) * lineHeight + lineHeight $lrcbox.css({ "top" : parseInt(top) + "px" }); } }) } , 1000) } lyricPlay();
效果如下：
总结
以上就是这篇文章的全部内容了，当然以上方法都只是我自己的想法，如果不足之处欢迎大家指点，希望本文的内容对大家能有一定的帮助。
您可能感兴趣的文章: