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


Posted in Javascript onMay 07, 2007

参考地址: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<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; 
  } 
}
Javascript 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
js操作数组函数实例小结
Dec 10 Javascript
深入理解js generator数据类型
Aug 16 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
javascript之ESC(第二类混淆)
May 06 #Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 #Javascript
使用正则替换变量
May 05 #Javascript
又一个小巧的图片预加载类
May 05 #Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 #Javascript
用js实现的抽象CSS圆角效果!!
May 03 #Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 #Javascript
You might like
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
php实现文件预览功能
2017/05/23 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
python中xrange用法分析
2015/04/15 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
用Python实现数据的透视表的方法
2018/11/16 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
西部世纪面试题
2014/12/05 面试题
车祸赔偿收入证明
2014/01/09 职场文书
《雨点》教学反思
2014/02/12 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android