人人做人人澡人人爽欧美,国产主播一区二区,久久久精品五月天,羞羞视频在线观看免费

當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

解讀 M$ 源代碼：JavaScript + CSS 完成層的平移及動態顯示

解讀 M$ 源代碼：JavaScript + CSS 完成層的平移及動態顯示

更新時間：2022-05-30 文章作者：未知 信息來源：網絡 閱讀次數：次

<!--解讀 M$ 源代碼：JavaScript + CSS 實現層的平移及動態顯示-->
<!--Open.htm-->
<!--本文主要由 JavaScript 和 CSS 實現的層的平移及動態顯示-->
<!--小弟的 JavaScript 水平實在有夠差勁，故以下注解均為個人理解，有疏漏及不當之處還請各位大蝦指正-->
<!--以下源代碼來源于 M$ Windows 2000 Professional 安裝光盤的 DISCOVER 目錄，更改之處見文檔的最有注解-->

<SCRIPT language="javascript">
var StartV = 0.5;
var EndV = 1;
var MidV;
var Inc = 0.12;
var Power = 3;
/* Inc 與 Power 共同控制每循環 alpha 的變化量及循環總個數*/
var mSec = 20;
var SlStartV;
var SlEndV;
var SlInc;
var mSec;
var openSec = 20;//控制循環完成所需時間
var SlPower;


function fadeLogo() {
if (EndV > .9999) {
StartV = StartV + Inc;
MidV = Math.sin(StartV) + 1;
EndV = Math.pow(MidV,Power);
/*個人認為采用形如“int i;i=1;i++”的方式定義 EndV，亦可達到 alpha 變化的效果，但是那樣只是勻速變化，不及此處使用的具有動感罷了*/
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;
/*為實現 alpha 與平移的連續性，亦可在 EndV 后加一個常量，這樣控制會容易一些*/
//alert(document.all.Discover.filters.alpha.opacity);
/*如我一般的菜鳥，可采用 alert 的方法跟蹤某個變量，以達到所需的效果，只是小心不要出現死循環，到時候別罵我哦~~
本例中跟蹤了 alpha 的值，100只出現一次便是我要的效果，即 alpha 與平移的連續*/
timer = window.setTimeout("fadeLogo();", openSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.055;
SlPower = 4;
mSec = 30;
/*變量賦值，以適應下次調用的需求。
SlInc 與 SlPower 共同控制每循環位置的變化量及循環總個數*/
openSlide();//調用 openSlide()，平移開始。注1。
}
}

function openSlide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
/*跟上邊一樣，沒什么好說的，除了我不懂 Math.pow 以外*/
Plane.style.posTop = Plane.style.posTop - SlEndV;
if (Plane.style.posTop < 150) {Marketing.style.display = "none"}//隱蔽被遮蔽層，當上移層高度超過他的高度的時候�？赏ㄟ^改變條件得到最佳效果。
timer = window.setTimeout("openSlide();", mSec, "JavaScript");
} else {
Blank.style.display = "none";//隱藏空白層(Blank)，見下面關于空白層的說明
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.09;
mSec = 30;
SlPower = 3
/*變量重賦值，其余沒什么好說的，跟上邊一樣*/
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="">
<!-- 當上移層(Discover)的下邊線超過被遮蔽層(Marketing)的下邊線時，為了不讓被遮蔽層(Marketing)被看到，需要用一個空白層(Blank)來遮蔽�？瞻讓拥竭_指定位置后需要隱藏。
如果上移層(Discover)的高度大于被遮蔽層(Marketing)，則不會出現這種情況，此時，不需要空白層(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;"：定義鼠標懸停與否使對象的 alpha 值改變，下同。注3-->
<DIV ID="Menu1" style="position:absolute; top:-400; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<!--cursor:hand;：定義懸停時鼠標形狀為手型，下同。注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");"來調用下一個過程的，個人認為沒有什么意義，所以改為直接調用"openSlide()"，以下均是如此。
注2：原(M$)代碼中包含有調用聲音的函數，本文已全部略去。
注3：原(M$)代碼中鼠標懸停時調用的是另一幅圖像，本文中改為更改對象的 alpha 值而得到理想的效果，下同。
注4：原(M$)代碼是在 IMG 對象中說明 cursor:hand ，本文改為在 DIV 對象中說明，下同。
以上代碼中可以看出，JavaScript 動態生成變量，用以隨時間改變層的絕對定位坐標，以實現層的位移；而使用 CSS 的濾鏡 alpha ，隨時間改變對象的 alpha 值，即可實現層的動態顯示。
相同的效果由 Flash 亦可實現，至于哪種方式更快些，，更加適合網頁的應用，因為沒有測試，所以我就不知道了~~
-->
<!--CopyRight By Cheery_Ke,04-07-2002,All Reserved-->

溫馨提示：喜歡本站的話，請收藏一下本站！

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
主站蜘蛛池模板： 古丈县| 阿克苏市| 凤城市| 鹤岗市| 正宁县| 宜都市| 习水县| 醴陵市| 镇远县| 武穴市| 岳阳县| 泗水县| 山西省| 宜兰市| 鄢陵县| 大渡口区| 清徐县| 高安市| 山阴县| 金乡县| 广河县| 娄烦县| 金湖县| 瑞昌市| 曲松县| 府谷县| 磴口县| 霞浦县| 海盐县| 阿拉善右旗| 肃南| 北京市| 稷山县| 新疆| 六安市| 肥东县| 东乌珠穆沁旗| 旌德县| 屏东县| 京山县| 临夏县|