查看完整版本: Javascript技术实现真正的网上试听

Javascript技术实现真正的网上试听

〓简介〓
描述：欢迎使用本脚本.本脚本使用户在线收听音乐的同时欣赏自动跟随的歌词，还可以随时控制暂停，播放。该脚本的特点:应用Javascript的层[wiki]技术[/wiki]，和一些function（）使播放音乐的同时实现歌词的相应滚动。使用realplay的rm格式音乐使下载的同时进行播放。
（该特殊效果对IE4以上都有效。）

〓正文〓
演示：
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;SCRIPTLanguage="Javascript1.2"%26gt;
%26lt;!--
varlocate=0;
varscro=0;
vargo=80;//控制滚动的[wiki]速度[/wiki]，越小越快。
//以下函数实现滚动
functionscroller(){
if(scro==1){
locate++;
scroll(20,locate);
clearTimeout(timer);
vartimer=setTimeout("scroller()",go);
timer;
}
else{

scroll(20,locate);
}
}
//--%26gt;
%26lt;/SCRIPT%26gt;
%26lt;metahttp-equiv="Content-Type"content="text/html;charset=gb2312"%26gt;
%26lt;title%26gt;WelcometoYI'sHome%26lt;/title%26gt;
%26lt;/head%26gt;
%26lt;bodybgcolor="#EEEEEE"%26gt;
%26lt;SCRIPTLanguage="Javascript1.2"%26gt;
%26lt;!--
varoffsettop=20//定义层的相应位置

//定义随网页自动滚动的层函数
functionmakeStatic(){
[wiki]object[/wiki]1.style.pixelTop=document.body.scrollTop+offsettop;object2.style.pixelTop=document.body.scrollTop+offsettop;
setTimeout("makeStatic()",100);//'100'控制滚动的速度，越小越快。
}
//切换‘滚动‘和‘暂停'图像的函数
functionscrorstp(){
if(scro==1)
{scro=0;
object2.style.visibility="visible";
object1.style.visibility="visible";
}
else{
scro=1;
object1.style.visibility="hidden";
scroller();}
}
//定义播放的歌曲地址
document.write('%26lt;divid="object2"style="position:absolute;left:20px;top:35px;width:46px;height:16px;cursor:hand;z-index:1"%26gt;%26lt;imgsrc="zanting.gif"width="45"height="16"onclick=scrorstp()%26gt;%26lt;fontsize="2"%26gt;%26lt;embedheight="20"src="AfainstAllOddsMariahCarey.rm"[wiki]type[/wiki]="audio/x-pn-realaudio-plugin"width="45"controls="PlayButton"autostart="false"%26gt;%26lt;/font%26gt;%26lt;/div%26gt;')
//定义‘滚动‘和‘暂停'的切换图像，onclick激发切换。
document.write('%26lt;divid="object1"style="position:absolute;left:20px;top:35px;width:46px;height:16px;cursor:hand;z-index:1"%26gt;%26lt;imgsrc="gundong.gif"width="45"height="16"onclick=scrorstp()%26gt;%26lt;/div%26gt;')
//启动Javascript
functionmenu3(){
if(document.all││document.layers)
makeStatic()
}
window.onload=menu3
//%26lt;/SCRIPT%26gt;以下是歌词部分
//--%26gt;
%26lt;/SCRIPT%26gt;//以下是
%26lt;ul%26gt;
%26lt;li%26gt;
%26lt;divalign="center"%26gt;
%26lt;center%26gt;
%26lt;p%26gt;%26lt;spanclass="font"%26gt;%26lt;b%26gt;MariahCarey--AgainstAllOdds%26lt;fontface="TimesNewRoman"size="4"%26gt;

%26lt;/b%26gt;%26lt;/span%26gt;%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;/center%26gt;
%26lt;blockquote%26gt;
%26lt;pstyle="line-height:150%"align="justify"class="font"%26gt;%26lt;spanclass="font"%26gt;
HowcanIjustletyouwalkaway%26lt;br%26gt;
Justletyouleavewithoutatrace%26lt;br%26gt;
WhenIstandheretaking%26lt;br%26gt;
Everybreathwithyou%26lt;br%26gt;
You'retheonlyone%26lt;br%26gt;
Whoreallyknewmeatall%26lt;br%26gt;
Howcanyoujustwalkawayfromme%26lt;br%26gt;
WhenallIcandoiswatchyouleave%26lt;br%26gt;
'Causewe'vesharedthelaughterandthepain%26lt;br%26gt;
Andevensharedthetears%26lt;br%26gt;
You'retheonlyone%26lt;br%26gt;
Whoreallyknewmeatall%26lt;br%26gt;%26lt;br%26gt;
Sotakealookatmenow%26lt;br%26gt;
Ohthere'sjustanemptyspace%26lt;br%26gt;
Andthere'snothingleftheretoremindme%26lt;br%26gt;
Justthememoryofyourface%26lt;br%26gt;
Takealookatmenow%26lt;br%26gt;
'Causethere'sjustanemptyspace%26lt;br%26gt;
Andyoucomingbacktomeisagainstallodds%26lt;br%26gt;
Andthat'swhatI'vegottoface%26lt;br%26gt;%26lt;br%26gt;
IwishIcouldjustmakeyouturnaround%26lt;br%26gt;
Turnaroundandseemecry%26lt;br%26gt;
There'ssomuchIneedtosaytoyou%26lt;br%26gt;
Somanyreasonswhy%26lt;br%26gt;
You'retheonlyone%26lt;br%26gt;
Whoreallyknewmeatall%26lt;br%26gt;%26lt;br%26gt;
Sotakealookatmenow%26lt;br%26gt;
'Causethere'sjustanemptyspace%26lt;br%26gt;
Andthere'snothingleftheretoremindme%26lt;br%26gt;
Justthememoryofyourface%26lt;br%26gt;
Takealookatmenow%26lt;br%26gt;
'Causethere'sjustanemptyspace%26lt;br%26gt;
Buttowaitforyouis%26lt;br%26gt;
AllIcando%26lt;br%26gt;
Andthat'swhatI'vegottoface%26lt;br%26gt;
Takeagoodlookatmenow%26lt;br%26gt;
'Causel'llstillbestandinghere%26lt;br%26gt;
Andyoucomingbacktomeisagainstallodds%26lt;br%26gt;
That'sthechanceI'veqottotake%26lt;br%26gt;%26lt;br%26gt;
Takealookatmenow%26lt;/p%26gt;
%26lt;/span%26gt;%26lt;/p%26gt;
%26lt;/blockquote%26gt;
%26lt;p%26gt;%26lt;/p%26gt;
%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
自己动手试试看，一边享受着音乐，一边享受着成功的喜悦吧！