取消歌词滚动，改成淡入淡出，解决错位问题

src/chanting/evening_chanting_A.md

@@ -4,8 +4,14 @@
   <source src="http://122.114.50.251:8010/jly/audio/大金塔晚课（礼敬洁地）1031.mp3" type="audio/mpeg">
 </audio>
 </div>
-<div class="live" id="lyriccontainer" style="height:90vh;over-flow:scroll;font-size:2rem;width: calc(100%);left: 0;">
-     
+<div class="live" id="lyriccontainer" style="height:90vh;font-size:4vmin;width: calc(100%);left: 0;">
+     <div class="fixed-lyric-box">
+		 <ul class="lyric-list" style="display:block">
+			<li id="line-last" style="height:15vh" class="to-bottom"><span></span></li>
+			<li id="line-current" class='active' style="height:15vh;padding-left:10vw"><span></span></li>
+			<li id="line-next" style="height:15vh;padding-left:20vw;" class="to-top"><span></span></li>
+		 </ul>
+	 </div>
 </div>
 <div>
 

theme/mycss/lrc.css

@@ -12,4 +12,19 @@
 	font-family:"Times New Roman",Georgia,Serif;
 }
 
+.to-top {
+    background-image: linear-gradient(
+      to top,
+      rgba(202,234,206) 0%,
+      rgb(0,0,0,0) 60%);
+  }
+
+
+.to-bottom {
+    background-image: linear-gradient(
+      to bottom,
+      rgba(202,234,206) 0%,
+      rgb(0,0,0,0) 60%);
+  }
+
 

theme/myjs/lrc.js

@@ -86,8 +86,8 @@
                             tmp=tmp[1].split(']');
                             var text=tmp[0];
                             tag=tag.replace(/([ti|ar|al|by])/g,'');
-                            arrLyric.push(tag+text);
-                            arrTime.push(toSeconds('00:00:00'));   //
+                            //arrLyric.push(tag+text);
+                            //arrTime.push(toSeconds('00:00:00'));   //
                         }else{
                             var text=str.substring(str.lastIndexOf("]")+1);
                             if(text==''){text=' ';}
@@ -113,64 +113,52 @@
                     }
                 }
             }
-            lyric='';
-            for(var i=0;i<arrLyric.length;i++){
-                lyric+='<li id="line-'+i+'" >'+arrLyric[i]+'</li>';
-            }
-
-            $this.html('<div class="fixed-lyric-box" style="position:relative;height:100%;overflow:hidden"><ul class="lyric-list" style="position:absolute;clear:both;display:block">'+lyric+'</ul></div>');
-
-            var $box=$this.find('.fixed-lyric-box');
-            var $list=$this.find('ul.lyric-list');
-
-            var height=$box.height();
-            var lineHeight=$list.height()/arrLyric.length;
-
-            $list.css({'left':'0px','top':(height-lineHeight)/2+'px'});
+			var arrLyricObj=new Array();
+			for(var k=0;k<arrTime.length;k++){
+				var timeStart=arrTime[k]?arrTime[k]:0;
+				var timeEnd=arrTime[k+1]?arrTime[k+1]-0.01:99999999999999;
+				var lrcContent=arrLyric[k];
+				
+				var lrc={timeStart:timeStart,timeEnd:timeEnd,lrcContent:lrcContent};
+				arrLyricObj.push(lrc);
+			}
+          
             
-            clearInterval(lyric_listener);
-            lyric_listener=setInterval(function(){     // 定时检查当前播放进度，作出滚动动作
+            clearTimeout(lyric_listener);
+			var fadeFinish=true;
+			var timeFun=function (){     // 定时检查当前播放进度，作出滚动动作
                 var pos=o.getPosition();
-                if(arrTime[currentLine]<=pos){  // 当前显示行号时间小于歌曲进度，需要正常向前移动
-                    for(var i=currentLine;i<arrLyric.length;i++){
-                        if(arrTime[i+1]>pos||i+1==arrLyric.length){
-                            var height=$box.height();
-                            currentLine=i;
-
-                            $list.find('li.active').removeClass('active');
-                            $list.find('li#line-'+currentLine).addClass('active');
-
-                            var topPos=(height-lineHeight)/2-(currentLine)*lineHeight;
-
-                            $list.animate({
-                                'top':topPos+'px'
-                            },400,function(){
-
-                            });
-                            break;
-                        }
-                    }
-                }else{
-                    for(var i=currentLine;i>0;i--){
-                        if(arrTime[i-1]<pos||i==0){
-                            var height=$box.height();
-                            currentLine=i;
-
-                            $list.find('li.active').removeClass('active');
-                            $list.find('li#line-'+currentLine).addClass('active');
-
-                            var topPos=(height-lineHeight)/2-(currentLine)*lineHeight;
-
-                            $list.animate({
-                                'top':topPos+'px'
-                            },400,function(){
-
-                            });
-                            break;
-                        }
-                    }                    
-                }
-            },o.speed);
+				for(var k=0;k<arrLyricObj.length;k++){
+					if(pos>=arrLyricObj[k].timeStart&&pos<=arrLyricObj[k].timeEnd){
+						if($("#line-current").text()!=arrLyricObj[k].lrcContent&&fadeFinish){
+							if(k>0){
+								$("#line-last span").fadeOut(1000,function(){
+									$("#line-last span").text(arrLyricObj[k-1].lrcContent);
+									$("#line-last span").fadeIn(1000);
+								});
+							}
+							if(k<arrTime.length-1){
+								$("#line-next span").fadeOut(1000,function(){
+									$("#line-next span").text(arrLyricObj[k+1].lrcContent);
+									$("#line-next span").fadeIn(1000);
+								});
+							}
+							fadeFinish=false;
+							$("#line-current span").fadeOut(1000,function(){
+								$("#line-current span").text(arrLyricObj[k].lrcContent);
+								$("#line-current span").fadeIn(1000,function(){
+									fadeFinish=true;
+								});
+								
+							});
+							
+							break;
+						}
+					}
+				}
+				lyric_listener=setTimeout(timeFun,o.speed);
+            };
+            lyric_listener=setTimeout(timeFun,o.speed);
         });
     };