站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → 网页播放技术-鼠标拖动歌词定位播放

网页播放技术-鼠标拖动歌词定位播放

摘要: 网页播放技术-鼠标拖动歌词定位播放
<tr> <td>

<textarea class=fm id=code style="WIDTH: 551px; HEIGHT: 174px" rows=12 cols=87> <head> WebTtPlayer - aboutplayer.com </head> <script language="JavaScript"> self.moveTo(0,0); self.resizeTo(screen.availWidth,screen.availHeight); </script> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onselectstart="self.event.returnValue=false" oncontextmenu="return false;"> [ti:泪的小雨] [ar:邓丽君] [offset:0] [la:zh] [by:aboutplayer] [00:02.00]泪的小雨 － 邓丽君 [00:08.05] [00:08.35]彩木雅夫 / Nagata Takashi 曲 [00:16.40] [00:16.70]庄奴 词 森冈贤一郎 编 [00:21.15] [00:22.65]<00:23.15>分<00:23.55>不<00:23.90>出<00:24.30>是<00:24.80>泪<00:25.40>是<00:26.10>雨<00:27.60> [00:28.30]<00:28.80>泪<00:29.15>和<00:29.50>雨<00:29.90>忆<00:30.36>起<00:30.95>了<00:31.70>你<00:33.90> [00:34.05]<00:34.55>忆<00:34.85>起<00:35.40>你<00:35.92><00:36.10>雨<00:36.40>中<00:36.90>分<00:37.45>离<00:38.15> [00:38.25]<00:38.70>泪<00:39.70>珠<00:40.00>儿<00:41.30>洒<00:42.05>满<00:43.00>地<00:44.40> [00:44.75]<00:45.25>哭<00:45.70>泣<00:46.35> <00:46.60>你<00:47.15>哭<00:47.63>泣<00:47.90>为<00:48.20>了<00:48.50>分<00:48.80>离<00:49.40> [00:49.55]分<00:50.00>离<00:50.70> <00:50.85>分<00:51.10>离<00:51.32>後<00:51.60>再<00:51.90>相<00:52.40>见<00:52.75>不<00:53.00>易<00:53.70> [00:53.80]<00:54.10>我<00:54.70>重<00:54.95>把<00:55.25>你<00:55.70>的<00:56.00>爱<00:56.35>情<00:56.65>藏<00:57.10>在<00:57.40>我<00:57.75>心<00:58.05>底<00:58.35> [00:58.45]<00:58.80>啊<00:59.20> <00:59.35>- - -<01:01.35> <01:01.75>藏<01:02.05>在<01:02.40>我<01:02.70>心<01:03.30>底<01:04.40> [01:04.55]就<01:05.07>好<01:05.50>像<01:06.35><01:06.63>藏<01:07.30>起<01:08.00>回<01:08.77>忆<01:11.80> [01:13.30] [01:22.50]<01:23.00>我<01:23.45>喜<01:23.80>欢<01:24.15>绵<01:24.65>绵<01:25.25>细<01:25.87>雨<01:27.85> [01:28.30]<01:28.80>细<01:29.20>雨<01:29.45>里<01:29.80>忆<01:30.35>起<01:31.00>了<01:31.65>你<01:33.90> [01:34.00]<01:34.50>忆<01:34.80>起<01:35.35>你<01:35.77><01:36.05>在<01:36.35>我<01:36.85>怀<01:37.40>里<01:38.40> [01:38.50]<01:38.80>泪<01:39.75>珠<01:40.05>儿<01:41.50>洒<01:42.10>满<01:43.15>地<01:44.60> [01:44.75]<01:45.25>哭<01:45.80>泣<01:46.47> <01:46.70>你<01:47.25>哭<01:47.69>泣<01:48.00>为<01:48.25>了<01:48.50>分<01:48.85>离<01:49.50> [01:49.65]分<01:50.15>离<01:50.95> <01:51.10>分<01:51.35>离<01:51.60>後<01:51.85>再<01:52.10>相<01:52.65>见<01:52.95>不<01:53.25>易<01:53.95> [01:54.05]<01:54.25>我<01:54.85>重<01:55.15>把<01:55.45>你<01:55.85>的<01:56.10>影<01:56.52>子<01:56.80>藏<01:57.30>在<01:57.55>睡<01:57.85>梦<01:58.35>里<01:58.65> [01:58.75]<01:59.05>啊<01:59.45> <01:59.60>- - -<02:01.80> <02:01.95>藏<02:02.30>在<02:02.65>睡<02:03.00>梦<02:03.50>里<02:04.75> [02:04.90]就<02:05.40>好<02:05.80>像<02:06.85><02:07.10>藏<02:07.60>起<02:08.30>回<02:09.23>忆<02:11.95> [02:13.45] [02:35.00]<02:35.50>分<02:35.85>不<02:36.15>出<02:36.55>是<02:37.10>泪<02:37.70>是<02:38.45>雨<02:40.25> [02:40.80]<02:41.30>泪<02:41.65>和<02:41.95>雨<02:42.25>忆<02:42.85>起<02:43.45>了<02:44.15>你<02:46.05> [02:46.60]<02:47.10>忆<02:47.40>起<02:47.95>你<02:48.40><02:48.55>雨<02:48.85>中<02:49.40>分<02:50.00>离<02:50.95> [02:51.05]<02:51.40>泪<02:52.30>珠<02:52.65>儿<02:53.90>洒<02:54.65>满<02:55.57>地<02:57.10> [02:57.30]<02:57.80>哭<02:58.30>泣<02:59.05> <02:59.20>你<02:59.70>哭<03:00.30>泣<03:00.60>为<03:00.95>了<03:01.20>分<03:01.50>离<03:02.05> [03:02.20]分<03:02.75>离<03:03.37> <03:03.55>分<03:03.80>离<03:04.05>後<03:04.30>再<03:04.60>相<03:05.20>见<03:05.50>不<03:05.80>易<03:06.70> [03:06.85]我<03:07.40>重<03:07.60>把<03:07.90>你<03:08.40>的<03:08.65>眼<03:09.05>泪<03:09.40>藏<03:09.80>在<03:10.00>寂<03:10.30>寞<03:10.75>里<03:11.05> [03:11.15]<03:11.55>啊<03:11.95> <03:12.10>- - -<03:14.22> <03:14.45>藏<03:14.80>在<03:15.10>寂<03:15.40>寞<03:15.90>里<03:17.20> [03:17.35]就<03:17.95>好<03:18.30>像<03:19.35><03:19.60>藏<03:20.10>起<03:20.80>回<03:21.73>忆<03:25.40> [03:26.90] [03:34.90]www.aboutplayer.com

<table border="0" cellspacing="0" cellpadding="0" id="lrcoll" width="100%" style="position:relative; top:120px;"> <tr><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20">歌词加载中</td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -20px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -60px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -80px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -100px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -120px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -140px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -160px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -180px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -200px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -220px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -240px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -260px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -280px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -300px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -320px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -340px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -360px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -380px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -400px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -420px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -440px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -460px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -480px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -500px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -520px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -540px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -560px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -580px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -600px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -620px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -640px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -660px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -680px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -700px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> <tr style="position:relative; top: -720px;"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20">
</td> </tr> </table> </td></tr> </table>
<script language="JavaScript"> lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3)); var lrc0, lrc1; moveflag = false; movable = false; moven = false; var lrctop; predlt = 0; curdlt = 0; curpot = 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]+>/.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] = tse-this.oTime; } lrcbc1.innerHTML = ""+ this.inr[ii].n.replace(/&/g,"&").replace(//g,">").replace(/%=%/g,"") +" "; var fall = lrcbc1.getElementsByTagName("font"); for(var wi=0; wi=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); 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(moven) moven = false; else { if(this.dlt>0) lowcolor(eval("lrcbc"+this.dlt)); if(this.dlt==ii-1) { predlt = this.dlt+1; if(predlt>0 && eval("lrcbc"+predlt).style.width!="100%") eval("lrcbc"+predlt).style.width = "100%"; if(predlt>0) highcolor(0,this.dte-this.dts); toposition(1,this.dte-this.dts); } if(ii-this.dlt>1 || ii-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) lowcolor(eval("lrcbc"+(this.dlt+1))); } if(this.dlt>=0) lowlight(eval("lrcbox"+(this.dlt+1))); highlight(eval("lrcbox"+(ii+1))); } this.dlt = ii; curdlt = ii; curpot = ii; } 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 = ((ki0) lowcolor(eval("lrcbc"+curdlt)); lowcolor(eval("lrcbc"+(curdlt+1))); lowlight(eval("lrcbox"+(curdlt+1))); if(lrcoll.style.pixelTop>120) lrcoll.style.top = 120; if(lrcoll.style.pixelTop<-((lrcobj.inr.length-1)*20-120)) lrcoll.style.top = -((lrcobj.inr.length-1)*20-120); 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 && o_y+offy>=-((lrcobj.inr.length-1)*20-120)) lrcoll.style.top = o_y+offy; if(o_y+offy>120) lrcoll.style.top = 120; if(o_y+offy<-((lrcobj.inr.length-1)*20-120)) lrcoll.style.top = -((lrcobj.inr.length-1)*20-120); 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 && lrcoll.style.pixelTop>100) 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]<0) aboutplayer.controls.currentPosition = 0; else aboutplayer.controls.currentPosition = lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]; if(lrcoll.style.pixelTop==o_y || Math.floor((lrcoll.style.pixelTop-120)/-20)==curdlt) highlight(eval("lrcbox"+(Math.floor((lrcoll.style.pixelTop-120)/-20)+1))); lrctop = lrcoll.style.pixelTop; moven = true; } else { lowlight(eval("lrcbox"+(curpot+1))); highlight(eval("lrcbox"+(curdlt+1))); lrcoll.style.top = o_y; } lrc0 = setTimeout("lrcrun()",10); element.releaseCapture(); element.style.cursor = "hand"; moveflag = false; } } </script> </body> </textarea>

<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code')" type=button value=运行代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</td> </tr> </table>
↑返回目录
前一篇: 网页播放技术的超炫应用实战解析
后一篇: Javascript实现三级联动选单