您好,欢迎访问一九零五行业门户网

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

参考地址:http://aboutplayer.com
复制代码 代码如下:
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    {
      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  {
    while(/]+\:[^]+>/.test(this.inr[ii].n))
    {
      this.inr[ii].n = this.inr[ii].n.replace(//,%=%);
      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 = + this.inr[ii].n.replace(/&/g,&).replace(/,/g,>).replace(/%=%/g,) + ;
    var fall = lrcbc1.getelementsbytagname(font);
    for(var wi=0; 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.dte)
    {
      var ii;
      for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}
      if(ii      this.ddh = this.inr[ii].t;
      this.fjh = this.inr[ii].w;
      this.dts = this.inr[ii].t[0];
      this.dte = (ii
      if(!movable)
      {
        lrctop = 140;
        lrcoll.style.pixeltop = 140;
        lowlight(lrcbox1);
        this.overtop();
        overbottom();
        for(var wi=1; 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      {
        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        bbw += this.fjh[ki];
      var kt = ki-1;
      var sc = ((ki      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  {
    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    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    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    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-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    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.pixeltop100-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        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;
  }
}
其它类似信息

推荐信息