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

潇洒0539

潇洒0539

2016-02-19 09:59

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享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(/(([[^[]]+:[^[]]+])+[^[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;
  }
}
展开更多 50%)
分享

猜你喜欢

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

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

android开发之横向滚动/竖向滚动的ListView(固定列头)

编程语言 网络编程
android开发之横向滚动/竖向滚动的ListView(固定列头)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JavaScript滚动新闻类

Web开发
JavaScript滚动新闻类

20个水平滚动风格的网站设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
20个水平滚动风格的网站设计欣赏

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript制作滚动文本效果

Web开发
JavaScript制作滚动文本效果

精选国外优秀的水平滚动网站设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
精选国外优秀的水平滚动网站设计欣赏

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

清华大学出版的事半功倍系列 javascript全部源代码

清华大学出版的事半功倍系列 javascript全部源代码

windows7系统怎么查看电脑的开机历史

windows7系统怎么查看电脑的开机历史
下拉加载更多内容 ↓