【 tulaoshi.com - Web开发 】
                             
                            参考地址: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(/(([[^[]]+:[^[]]+])+[^[rn]*)[^[]*/,"n"); 
    var zzzt = RegExp.$1; 
    /^(.+])([^]]*)$/.exec(zzzt); 
    var ltxt = RegExp.$2; 
    var eft = RegExp.$1.slice(1,-1).split("]["); 
    for(var ii=0; iieft.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; iithis.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,"/fontfont") +" /font"; 
    var fall = lrcbc1.getElementsByTagName("font"); 
    for(var wi=0; wifall.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; ii0 && this.inr[ii].t[0]ffbb; ii--){} 
    top = ii; 
  } 
  this.run = function(tme) 
  { 
    if(tmethis.dts || tme=this.dte) 
    { 
      var ii; 
      for(ii=this.inr.length-1; ii=0 && this.inr[ii].t[0]tme; ii--){} 
      if(ii0) return; 
      this.ddh = this.inr[ii].t; 
      this.fjh = this.inr[ii].w; 
      this.dts = this.inr[ii].t[0]; 
      this.dte = (iithis.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.dlt0) lowcolor(eval("lrcbc"+this.dlt)); 
      clearTimeout(lrc2); 
      if(this.dlt==ii-1) 
      { 
        predlt = this.dlt+1; 
        if(!ptms && predlt0) 
        { 
          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.dlt1 || 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; kithis.ddh.length && this.ddh[ki]=tme; ki++) 
        bbw += this.fjh[ki]; 
      var kt = ki-1; 
      var sc = ((kithis.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(bbweval("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.duration0) 
  { 
    var ii; 
    for(ii=lrcobj.inr.length-1; ii0 && 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(step20) 
  { 
    step++; 
    setTimeout("toposition("+step+","+dur+");",dur*50); 
  } 
} 
function highcolor(step,dur) 
{ 
  if(moveflag) return; 
  eval("lrcbc"+predlt).filters.alpha.opacity = 100-(step++)*10; 
  if(step10) 
    lrc1 = setTimeout("highcolor("+step+","+dur+");",dur*100); 
} 
function curhighcolor(step,dur) 
{ 
  if(moveflag) return; 
  eval("lrcbc"+(curdlt+1)).filters.alpha.opacity = (step++)*10; 
  if(step10) 
    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(curdlt0) lowcolor(eval("lrcbc"+curdlt)); 
    lowcolor(eval("lrcbc"+(curdlt+1))); 
    lowlight(eval("lrcbox"+(curdlt+1))); 
    if(lrcoll.style.pixelTop120-top*20) lrcoll.style.top = 120-top*20; 
    if(lrcoll.style.pixelTop120-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+offy120-top*20) lrcoll.style.top = 120-top*20; 
    if(o_y+offy120-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.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]-ffbb0) 
        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; 
  } 
}