首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
平面设计
画册
VI欣赏
包装
CG-插画
搜索
个人网页
Alexa排名
CSS
建站资源
下载专区
JS特效
品牌服装
服装院校
专题欣赏
SEO
图标欣赏
专题
域名注册
虚拟主机
广州网站设计
域名注册
广州网站建设
上海网站建设
虚拟主机
广州网页设计
签名设计
虚拟主机
域名注册
acg王国
ACG玩家
当前位置：
网站综合首页
>>
网页JS特效
>>
鼠标事件类
>> 鼠标拖动歌词定位播放代码
鼠标拖动歌词定位播放代码
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
ACG王国
来源：
中国设计秀
作者：
点击：
88
加入收藏
发表评论
0
顶一下
点击下面的运行，可预览效果。
代码如下：
<html> <head> <title>WebTtPlayer - aboutplayer.com</title> <style> #lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;} #lrcoll td { color:#0080C0; } .lrcbc { color:#FFFF33; overflow:hidden; height:20; width:0; filter:alpha(opacity=100); } </style> </head> <script language="JavaScript"> self.moveTo(0,0); self.resizeTo(screen.availWidth,screen.availHeight); </script> <base onmouseover="window.status=' aboutplayer.com 别忘了把地址告诉你QQ上的朋友哦！'; return true;"> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onselectstart="self.event.returnValue=false" oncontextmenu="return false;"> <span id="lrcdata"><!-- [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 --></span> <center> <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="aboutplayer" width="480" height="240"> <param name="url" value="../play.asp?id=3&action=url"> <param name="volume" value="100"> <param name="playcount" value="100"> <param name="enablecontextmenu" value="0"> <param name="enableerrordialogs" value="0"> </object> <div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000; cursor:hand;" title="鼠标拖动歌词定位播放"> <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"><span id="lrcbox1" style="height:20; color:#00FF00">歌词加载中</span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc1" class="lrcbc"></div></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"><span id="lrcbox2" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc2" class="lrcbc"></div></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"><span id="lrcbox3" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc3" class="lrcbc"></div></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"><span id="lrcbox4" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc4" class="lrcbc"></div></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"><span id="lrcbox5" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc5" class="lrcbc"></div></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"><span id="lrcbox6" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc6" class="lrcbc"></div></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"><span id="lrcbox7" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc7" class="lrcbc"></div></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"><span id="lrcbox8" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc8" class="lrcbc"></div></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"><span id="lrcbox9" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc9" class="lrcbc"></div></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"><span id="lrcbox10" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc10" class="lrcbc"></div></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"><span id="lrcbox11" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc11" class="lrcbc"></div></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"><span id="lrcbox12" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc12" class="lrcbc"></div></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"><span id="lrcbox13" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc13" class="lrcbc"></div></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"><span id="lrcbox14" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc14" class="lrcbc"></div></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"><span id="lrcbox15" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc15" class="lrcbc"></div></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"><span id="lrcbox16" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc16" class="lrcbc"></div></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"><span id="lrcbox17" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc17" class="lrcbc"></div></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"><span id="lrcbox18" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc18" class="lrcbc"></div></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"><span id="lrcbox19" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc19" class="lrcbc"></div></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"><span id="lrcbox20" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc20" class="lrcbc"></div></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"><span id="lrcbox21" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc21" class="lrcbc"></div></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"><span id="lrcbox22" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc22" class="lrcbc"></div></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"><span id="lrcbox23" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc23" class="lrcbc"></div></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"><span id="lrcbox24" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc24" class="lrcbc"></div></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"><span id="lrcbox25" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc25" class="lrcbc"></div></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"><span id="lrcbox26" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc26" class="lrcbc"></div></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"><span id="lrcbox27" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc27" class="lrcbc"></div></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"><span id="lrcbox28" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc28" class="lrcbc"></div></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"><span id="lrcbox29" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc29" class="lrcbc"></div></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"><span id="lrcbox30" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc30" class="lrcbc"></div></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"><span id="lrcbox31" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc31" class="lrcbc"></div></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"><span id="lrcbox32" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc32" class="lrcbc"></div></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"><span id="lrcbox33" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc33" class="lrcbc"></div></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"><span id="lrcbox34" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc34" class="lrcbc"></div></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"><span id="lrcbox35" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc35" class="lrcbc"></div></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"><span id="lrcbox36" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc36" class="lrcbc"></div></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"><span id="lrcbox37" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"> <td nowrap height="20"><div id="lrcbc37" class="lrcbc"></div></td> </tr> </table> </td></tr> </table> </div> </center> <script language="JavaScript"> lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3)); var lrc0, lrc1; moveflag = false; movable = false; 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] = tse-this.oTime; 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] = tse-this.oTime; } 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.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); 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)); 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))); this.dlt = ii; curdlt = ii; highlight(eval("lrcbox"+(this.dlt+1))); } 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 lrcrun() { with(aboutplayer) { lrcobj.run(controls.currentPosition); } if(arguments.length==0) lrc0 = setTimeout("lrcrun()",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 highlight(lid) { lid.style.color = "#00FF00"; } function lowcolor(lid) { clearTimeout(lrc1); lid.style.width = 0; lid.filters.alpha.opacity = 100; } function lowlight(lid) { lid.style.color = "#0080C0"; } lrcrun(); 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) {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) 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]; 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 = setTimeout("lrcrun()",10); element.releaseCapture(); element.style.cursor = "hand"; moveflag = false; } } </script> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
2007-08-22 15:32:00 出处：
本文引用地址：
http://www.cnwebshow.com/site/html/article_1035.html
热点文章/相关文章
最新文章
·
网页效果获取鼠标点击的位置
·
js密码强度提示代码
·
动画效果鼠标点击打开/关闭层
·
跟随鼠标的弹性效果的运动图片
·
鼠标滑过图片出现大图片提示层...
·
JS特效跟随鼠标的图片
·
鼠标随移动的方向而改变
·
js特效点击会变色哦！！
·
一个表单内的多个按钮提交
·
页头下拉广告，加了关闭按钮，...
艺术设计秀最新图片
美国设计师平面设...
乌克兰平面设计作...
DeLonghi Steam I...
Simi Mahtani 杂志...
多款酒瓶包装设计...
优秀企业画册设计欣赏
推荐文章
·
网页效果获取鼠标点击的位置
·
动画效果鼠标点击打开/关闭层
·
鼠标滑过图片出现大图片提示层...
素材下载
矢量
潮流素材
背景素材
模板
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我，秀出精彩！
中国设计秀，秀---无处不在！！
交流群：9107036 3848215 8850631
粤ICP备05067046号
