源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript之水平横向滚动歌词同步的应用

  • 时间:2020-06-13 01:14 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript之水平横向滚动歌词同步的应用
参考地址:[url=http://aboutplayer.com]http://aboutplayer.com[/url]
[u]复制代码[/u] 代码如下:
var lrc0, lrc1, lrc2; moveflag = false; var top, bottom; var lrcobj; var lrctop; predlt = 0; curdlt = 0; function lrcClass(tt) {   this.inr = [];   this.oTime = 0;   this.dts = -1;   this.dte = -1;   this.dlt = -1;   this.ddh;   this.fjh;   if(/\[offset\:(\-?\d+)\]/i.test(tt))     this.oTime = RegExp.$1/1000;   tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1");   tt = tt.replace(/\[[^\[\]\:]*\]/g,"");   tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");   tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");   tt = tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,"");   tt = tt.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,"");   while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt))   {     tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");     var zzzt = RegExp.$1;     /^(.+\])([^\]]*)$/.exec(zzzt);     var ltxt = RegExp.$2;     var eft = RegExp.$1.slice(1,-1).split("][");     for(var ii=0; ii<eft.length; ii++)     {       var sf = eft[ii].split(":");       var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);       var sso = { t:[] , w:[] , n:ltxt }       sso.t[0] = Math.round((tse-this.oTime)*1000)/1000;       this.inr[this.inr.length] = sso;     }   }   this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} );   for(var ii=0; ii<this.inr.length; ii++)   {     while(/<[^<>]+\:[^<>]+>/.test(this.inr[ii].n))     {       this.inr[ii].n = this.inr[ii].n.replace(/<(\d+)\:([\d\.]+)>/,"%=%");       var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2);       this.inr[ii].t[this.inr[ii].t.length] = Math.round((tse-this.oTime)*1000)/1000;     }     lrcbc1.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +" </font>";     var fall = lrcbc1.getElementsByTagName("font");     for(var wi=0; wi<fall.length; wi++)       this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;     this.inr[ii].n = lrcbc1.innerText;   }   this.overtop = function()   {     var ii;     for(ii=this.inr.length-1; ii>0 && this.inr[ii].t[0]>ffbb; ii--){}     top = ii;   }   this.run = function(tme)   {     if(tme<this.dts || tme>=this.dte)     {       var ii;       for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}       if(ii<0) return;       this.ddh = this.inr[ii].t;       this.fjh = this.inr[ii].w;       this.dts = this.inr[ii].t[0];       this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration;       if(!movable)       {         lrctop = 140;         lrcoll.style.pixelTop = 140;         lowlight(lrcbox1);         this.overtop();         overbottom();         for(var wi=1; wi<=this.inr.length; wi++)         {           eval("lrcbox"+wi).innerText = this.inr[wi-1].n;           eval("lrcbc"+wi).innerText = this.inr[wi-1].n;         }         movable = true;       }       if(this.dlt>0) lowcolor(eval("lrcbc"+this.dlt));       clearTimeout(lrc2);       if(this.dlt==ii-1)       {         predlt = this.dlt+1;         if(!ptms && predlt>0)         {           eval("lrcbc"+predlt).filters.alpha.opacity = 100;           eval("lrcbc"+predlt).style.width = "100%";           highcolor(0,this.dte-this.dts);         }         toposition(1,this.dte-this.dts);       }       if(ii-this.dlt>1 || ii-this.dlt<=-1)       {         if(this.dlt>=0) lowcolor(eval("lrcbc"+(this.dlt+1)));         if(this.dlt==-1 || ii==0)         {           jumpto(ii-this.dlt-1);           toposition(1,this.dte-this.dts);         }         else           jumpto(ii-this.dlt);       }       if(this.dlt>=0) lowlight(eval("lrcbox"+(this.dlt+1)));       this.dlt = ii;       curdlt = ii;       if(!drdc) highlight(eval("lrcbox"+(this.dlt+1)));       if(drdc)       {         curlowcolor(eval("lrcbc"+(this.dlt+1)));         curhighcolor(0,this.dte-this.dts);       }     }     if(klok)     {       var bbw = 0;       var ki;       for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++)         bbw += this.fjh[ki];       var kt = ki-1;       var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt];       var tc = tme - this.ddh[kt];       bbw -= this.fjh[kt] - tc / sc * this.fjh[kt];       if(bbw>eval("lrcbox"+(this.dlt+1)).offsetWidth)         bbw = eval("lrcbox"+(this.dlt+1)).offsetWidth;       eval("lrcbc"+(this.dlt+1)).style.width = Math.round(bbw);     }   }   lrcbox1.innerText = "www.aboutplayer.com"; } function overbottom() {   if(aboutplayer.currentMedia.duration>0)   {     var ii;     for(ii=lrcobj.inr.length-1; ii>0 && lrcobj.inr[ii].t[0]-ffbb>=aboutplayer.currentMedia.duration; ii--){}     bottom = ii;   }   else     setTimeout("overbottom()",10); } function jumpto(nline) {   lrctop -= 20*nline;   lrcoll.style.top = lrctop; } function toposition(step,dur) {   if(moveflag) return;   lrcoll.style.top = lrctop--;   if(step<20)   {     step++;     setTimeout("toposition("+step+","+dur+");",dur*50);   } } function highcolor(step,dur) {   if(moveflag) return;   eval("lrcbc"+predlt).filters.alpha.opacity = 100-(step++)*10;   if(step<10)     lrc1 = setTimeout("highcolor("+step+","+dur+");",dur*100); } function curhighcolor(step,dur) {   if(moveflag) return;   eval("lrcbc"+(curdlt+1)).filters.alpha.opacity = (step++)*10;   if(step<10)     lrc2 = setTimeout("curhighcolor("+step+","+dur+");",dur*100); } function highlight(lid) {   lid.style.color = "#00FF00"; } function lowcolor(lid) {   clearTimeout(lrc1);   lid.style.width = 0;   lid.filters.alpha.opacity = 100; } function curlowcolor(lid) {   lid.filters.alpha.opacity = 0;   lid.style.width = "100%"; } function lowlight(lid) {   lid.style.color = "#0080C0"; } function lrcrun(m) {   lrcobj = new lrcClass(m);   lrc0 = setInterval("try {lrcobj.run(aboutplayer.controls.currentPosition+ffbb)} catch(hh){}",10); } MakeMovable(lrcollbox); function MakeMovable(element) {   element.attachEvent("onmousedown",onmousedown);    element.attachEvent("onmouseup",onmouseup);   element.attachEvent("onmousemove",onmousemove);   flagmove = false;   var s_y, o_y;   curpot = 0;   function onmousedown()   {     if(event.button!=1 || moveflag || !movable || !type || bottom==0) {flagmove = true; return;}     clearTimeout(lrc0);     if(curdlt>0) lowcolor(eval("lrcbc"+curdlt));     lowcolor(eval("lrcbc"+(curdlt+1)));     lowlight(eval("lrcbox"+(curdlt+1)));     if(lrcoll.style.pixelTop>120-top*20) lrcoll.style.top = 120-top*20;     if(lrcoll.style.pixelTop<120-bottom*20) lrcoll.style.top = 120-bottom*20;     s_y = event.clientY;     o_y = lrcoll.style.pixelTop;     element.style.cursor = "n-resize";     element.setCapture();     moveflag = true;   }   function onmousemove()   {     if(event.button!=1 || !moveflag || flagmove) return;     var offy = event.clientY-s_y;     if(o_y+offy<=120-top*20 && o_y+offy>=120-bottom*20) lrcoll.style.top = o_y+offy;     if(o_y+offy>120-top*20) lrcoll.style.top = 120-top*20;     if(o_y+offy<120-bottom*20) lrcoll.style.top = 120-bottom*20;     var pot = Math.floor((lrcoll.style.pixelTop-120)/-20);     if(pot!=curpot)     {       lowlight(eval("lrcbox"+(curpot+1)));       curpot = pot;       highlight(eval("lrcbox"+(curpot+1)));     }   }   function onmouseup()   {     if(!moveflag || flagmove) {flagmove = false; return;}     if(aboutplayer.playState==3)     {       if(lrcoll.style.pixelTop<=120-top*20 && lrcoll.style.pixelTop>100-top*20)         lrcobj.dte = -1;       else         lrcobj.dte = lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)-1].t[0];       if(lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]-ffbb<0)         aboutplayer.controls.currentPosition = 0;       else         aboutplayer.controls.currentPosition = lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]-ffbb;       lrcobj.dlt = Math.floor((lrcoll.style.pixelTop-120)/-20);       lrctop = lrcoll.style.pixelTop;     }     else     {       lowlight(eval("lrcbox"+(curpot+1)));       highlight(eval("lrcbox"+(curdlt+1)));       lrcoll.style.top = o_y;     }     lrc0 = setInterval("try {lrcobj.run(aboutplayer.controls.currentPosition+ffbb)} catch(hh){}",10);     element.releaseCapture();     element.style.cursor = "hand";     moveflag = false;   } }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部