|
<!--解讀 M$ 源代碼：JavaScript + CSS 實(shí)現(xiàn)層的平移及動(dòng)態(tài)顯示-->
<!--Open.htm-->
<!--本文主要由 JavaScript 和 CSS 實(shí)現(xiàn)的層的平移及動(dòng)態(tài)顯示-->
<!--小弟的 JavaScript 水平實(shí)在有夠差勁，故以下注解均為個(gè)人理解，有疏漏及不當(dāng)之處還請(qǐng)各位大蝦指正-->
<!--以下源代碼來(lái)源于 M$ Windows 2000 Professional 安裝光盤的 DISCOVER 目錄，更改之處見(jiàn)文檔的最有注解-->
<SCRIPT language="javascript">
var StartV = 0.5;
var EndV = 1;
var MidV;
var Inc = 0.12;
var Power = 3;
/* Inc 與 Power 共同控制每循環(huán) alpha 的變化量及循環(huán)總個(gè)數(shù)*/
var mSec = 20;
var SlStartV;
var SlEndV;
var SlInc;
var mSec;
var openSec = 20;//控制循環(huán)完成所需時(shí)間
var SlPower;
function fadeLogo() {
if (EndV > .9999) {
StartV = StartV + Inc;
MidV = Math.sin(StartV) + 1;
EndV = Math.pow(MidV,Power);
/*個(gè)人認(rèn)為采用形如“int i;i=1;i++”的方式定義 EndV，亦可達(dá)到 alpha 變化的效果，但是那樣只是勻速變化，不及此處使用的具有動(dòng)感罷了*/
document.all.brandLogo.filters.alpha.opacity = document.all.brandLogo.filters.alpha.opacity + EndV ;
document.all.Discover.filters.alpha.opacity = document.all.Discover.filters.alpha.opacity + EndV ;
document.all.Marketing.filters.alpha.opacity = document.all.Marketing.filters.alpha.opacity + EndV;
/*為實(shí)現(xiàn) alpha 與平移的連續(xù)性，亦可在 EndV 后加一個(gè)常量，這樣控制會(huì)容易一些*/
//alert(document.all.Discover.filters.alpha.opacity);
/*如我一般的菜鳥(niǎo)，可采用 alert 的方法跟蹤某個(gè)變量，以達(dá)到所需的效果，只是小心不要出現(xiàn)死循環(huán)，到時(shí)候別罵我哦~~
本例中跟蹤了 alpha 的值，100只出現(xiàn)一次便是我要的效果，即 alpha 與平移的連續(xù)*/
timer = window.setTimeout("fadeLogo();", openSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.055;
SlPower = 4;
mSec = 30;
/*變量賦值，以適應(yīng)下次調(diào)用的需求。
SlInc 與 SlPower 共同控制每循環(huán)位置的變化量及循環(huán)總個(gè)數(shù)*/
openSlide();//調(diào)用 openSlide()，平移開(kāi)始。注1。
}
}
function openSlide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
/*跟上邊一樣，沒(méi)什么好說(shuō)的，除了我不懂 Math.pow 以外*/
Plane.style.posTop = Plane.style.posTop - SlEndV;
if (Plane.style.posTop < 150) {Marketing.style.display = "none"}//隱蔽被遮蔽層，當(dāng)上移層高度超過(guò)他的高度的時(shí)候�？赏ㄟ^(guò)改變條件得到最佳效果。
timer = window.setTimeout("openSlide();", mSec, "JavaScript");
} else {
Blank.style.display = "none";//隱藏空白層(Blank)，見(jiàn)下面關(guān)于空白層的說(shuō)明
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.09;
mSec = 30;
SlPower = 3
/*變量重賦值，其余沒(méi)什么好說(shuō)的，跟上邊一樣*/
navSlide();
}
}
function navSlide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
TOC.style.posLeft = TOC.style.posLeft + SlEndV;
timer = window.setTimeout("navSlide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu1Slide();
}
}
function menu1Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu1.style.posTop = Menu1.style.posTop + SlEndV;
timer = window.setTimeout("menu1Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu2Slide();
}
}
function menu2Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu2.style.posTop = Menu2.style.posTop + SlEndV;
timer = window.setTimeout("menu2Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu3Slide();
}
}
function menu3Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu3.style.posTop = Menu3.style.posTop + SlEndV;
timer = window.setTimeout("menu3Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu4Slide();
}
}
function menu4Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu4.style.posTop = Menu4.style.posTop + SlEndV;
timer = window.setTimeout("menu4Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
return;
}
}
</SCRIPT>
<Body bgcolor="White" onload="fadeLogo();this.focus(); " leftmargin="0" topmargin="0"> <!--注2-->
<table>
<tr>
<td align="center">
<IMG ID="brandLogo" style="filter:alpha(opacity=0)" class="Brand" src=http://cfan.net.cn/info/"images/banner.gif" width="480" height="60" border="0" alt="" style="position:absolute; left: 143; top: 0;">
<!--style="filter:alpha(opacity=0)"：定義初始 alpha 值為 0，下同。 -->
<DIV ID="Plane" style="position:absolute; left: 0; top: 552;">
<IMG ID="Discover" src=http://cfan.net.cn/info/"images/fengexian.gif" width="762" height="20" border="0" alt="" style="filter:alpha(opacity=0);">
<IMG ID="Blank" src=http://cfan.net.cn/info/"images/blank.gif" width="562" style="position: relative; top: -4" height="300" border="0" alt="">
<!-- 當(dāng)上移層(Discover)的下邊線超過(guò)被遮蔽層(Marketing)的下邊線時(shí)，為了不讓被遮蔽層(Marketing)被看到，需要用一個(gè)空白層(Blank)來(lái)遮蔽�？瞻讓拥竭_(dá)指定位置后需要隱藏。
如果上移層(Discover)的高度大于被遮蔽層(Marketing)，則不會(huì)出現(xiàn)這種情況，此時(shí)，不需要空白層(Blank)-->
<br>
</DIV>
<IMG ID="Marketing" src=http://cfan.net.cn/info/"images/ad.gif" width="562" height="526" border="0" alt="" style="position:absolute; left: 200; top: 60; display:block; filter:alpha(opacity=0); z-index:-1">
<DIV ID="TOC" style="background-image: url(images/leftback.gif); width:200; height:524;position:absolute; top:62; left:-200; z-index:-2">
<IMG SRC=http://cfan.net.cn/info/"images/welcome.gif" ID="DisTxt" style="position:absolute; top:10; left:-20;" width="200" height="560" border="0" alt="" hspace="2" vspace="2">
</DIV>
<A target="_self" href="jiaocheng/default.htm" onclick="top.TopMain.Main.location='jiaocheng/default.htm'" onmouseOver="javascript:document.all.Menu1.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu1.filters.alpha.opacity = 50;">
<!--onmouseOver="javascript:document.all.Menu1.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu1.filters.alpha.opacity = 50;"：定義鼠標(biāo)懸停與否使對(duì)象的 alpha 值改變，下同。注3-->
<DIV ID="Menu1" style="position:absolute; top:-400; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<!--cursor:hand;：定義懸停時(shí)鼠標(biāo)形狀為手型，下同。注4-->
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG src=http://cfan.net.cn/info/"images/jiaocheng.gif" width="60" height="60" border="0" alt="" hspace="10" align="10">
</td>
<td>
<IMG ID="User" src=http://cfan.net.cn/info/"images/jiaocheng1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG src=http://cfan.net.cn/info/"images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="wuxia/default.htm" onclick="top.TopMain.Main.location='wuxia/default.htm'" onmouseOver="javascript:document.all.Menu2.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu2.filters.alpha.opacity = 50;">
<DIV ID="Menu2" style="position:absolute; top:-310; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG src=http://cfan.net.cn/info/"images/wuxia.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" src=http://cfan.net.cn/info/"images/wuxia1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG src=http://cfan.net.cn/info/"images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="wangluo/default.htm" onclick="top.TopMain.Main.location='wangluo/default.htm'" onmouseOver="javascript:document.all.Menu3.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu3.filters.alpha.opacity = 50;">
<DIV ID="Menu3" style="position:absolute; top:-210; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG src=http://cfan.net.cn/info/"images/wangluo.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" src=http://cfan.net.cn/info/"images/wangluo1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG src=http://cfan.net.cn/info/"images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="kaixin/default.htm" onclick="top.TopMain.Main.location='kaixin/default.htm'" onmouseOver="javascript:document.all.Menu4.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu4.filters.alpha.opacity = 50;">
<DIV ID="Menu4" style="position:absolute; top:-100; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG src=http://cfan.net.cn/info/"images/kaixin.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" src=http://cfan.net.cn/info/"images/kaixin1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG src=http://cfan.net.cn/info/"images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A>
</td>
</tr>
</Body>
<!--
注1：原(M$)代碼中使用"timer = window.setTimeout("openSlide();", mSec, "JavaScript");"來(lái)調(diào)用下一個(gè)過(guò)程的，個(gè)人認(rèn)為沒(méi)有什么意義，所以改為直接調(diào)用"openSlide()"，以下均是如此。
注2：原(M$)代碼中包含有調(diào)用聲音的函數(shù)，本文已全部略去。
注3：原(M$)代碼中鼠標(biāo)懸停時(shí)調(diào)用的是另一幅圖像，本文中改為更改對(duì)象的 alpha 值而得到理想的效果，下同。
注4：原(M$)代碼是在 IMG 對(duì)象中說(shuō)明 cursor:hand ，本文改為在 DIV 對(duì)象中說(shuō)明，下同。
以上代碼中可以看出，JavaScript 動(dòng)態(tài)生成變量，用以隨時(shí)間改變層的絕對(duì)定位坐標(biāo)，以實(shí)現(xiàn)層的位移；而使用 CSS 的濾鏡 alpha ，隨時(shí)間改變對(duì)象的 alpha 值，即可實(shí)現(xiàn)層的動(dòng)態(tài)顯示。
相同的效果由 Flash 亦可實(shí)現(xiàn)，至于哪種方式更快些，，更加適合網(wǎng)頁(yè)的應(yīng)用，因?yàn)闆](méi)有測(cè)試，所以我就不知道了~~
-->
<!--CopyRight By Cheery_Ke,04-07-2002,All Reserved-->
|
