当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript之水平横向滚动歌词同步的应用

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 328 ::
收藏到网摘: n/a

参考地址: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;
}
}