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

Javascript
用Javascript实现锚点(Anchor)间平滑跳转
实现png图片和png背景透明(支持多浏览器)的方法
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
用DIV完美模拟createPopup 弹出窗口(修正版),支持Firefox,ie,chrome
JavaScript 中级笔记 第一章
IE与Firefox在JavaScript上的7个不同写法小结
MooTools 1.2介绍
Mootools 1.2教程(2) DOM选择器
Mootools 1.2教程(3) 数组使用简介
在IE下获取object(ActiveX)的Param的代码
ExtJS 配置和表格控件使用
javascript 缓冲效果实现代码 推荐
html数组字符串拼接的最快方法
JavaScript 浮动定位提示效果实现代码
类似CSDN图片切换效果脚本
javascript 面向对象编程 function也是类
javascript 面向对象编程 聊聊对象的事
javascript 面向对象编程 function是方法(函数)
[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
jQuery slider Content(左右控制移动)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 228 ::
收藏到网摘: 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;
}
}