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

當(dāng)前位置:蘿卜系統(tǒng)下載站 > 技術(shù)開發(fā)教程 > 詳細頁面

解讀 M$ 源代碼：JavaScript + CSS 完成動態(tài)菜單顯示

解讀 M$ 源代碼：JavaScript + CSS 完成動態(tài)菜單顯示

更新時間：2022-05-30 文章作者：未知 信息來源：網(wǎng)絡(luò) 閱讀次數(shù)：次

<!--解讀 M$ 源代碼：JavaScript + CSS 實現(xiàn)動態(tài)菜單顯示-->
<!--Default.htm-->
<!--小弟的 JavaScript 水平實在有夠差勁，故以下注解均為個人理解，有疏漏及不當(dāng)之處還請各位大蝦指正-->
<!--以下源代碼來源于 M$ Windows 2000 Professional 安裝光盤的 DISCOVER/EASY2USE 目錄，更改之處見文檔的最后注解-->
<!--有關(guān)“單位”與“集合”的定義，請參見文檔后面的注解-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>更易使用</TITLE><!--注1-->
<SCRIPT language="javascript">

var whichIm;
var varColor = "DDEEFF";

document.onmouseover = mouseOver;
document.onmouseout = mouseOut;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

function mouseOver() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent")/*判斷對象是否為“單位”*/ {
fColor = vSrc.style.backgroundColor;
vSrc.style.backgroundColor = varColor;
/*注2*/
}
}

function mouseOut() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent") {
vSrc.style.backgroundColor = fColor;
/*注2*/
}
}

function mouseDown() {
var vSrc = window.event.srcElement;
divColl=document.all.tags("DIV");
for (i=0; i < divColl.length; i++) {
if (((divColl(i).className == "parent")||(divColl(i).className == "child2")||(divColl(i).className == "child3"))&&(divColl(i).id != vSrc.id))/*注3*/ {
divColl(i).style.backgroundColor = "";
}
if (((divColl(i).className == "parent")||(divColl(i).className == "child2")||(divColl(i).className == "child3"))&&(divColl(i).id == vSrc.id))/*注3*/ {
 divColl(i).style.backgroundColor = "#FFFFFF";
 fColor = "#FFFFFF";
}
}
}

function mouseUp() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent") {
/*注2*/
}
}
//<!-- Navigation functions -->

function closeAll(el) {
divColl=document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
felEl=eval(el + "Child1");
if ((divColl(i).className == "child1") && (felEl != divColl(i))) {
divColl(i).style.display="none";
}
}
}

function navOnload() {
divColl=document.all.tags("DIV");
for (i=0; i< divColl.length; i++) {
if (divColl(i).className == "child1" || divColl(i).className == "child4") {
if (divColl(i).className == "child4" && divColl(i).style.display == "block") {
whichArrow = eval(divColl(i).Arr);
whichArrow.src = "../images/tocuparw.gif";
}
}
}
}

function expandIE(el) {
whichEl=eval(el + "Child1");
closeAll(el);
if (whichEl.style.display != "block") {
whichEl.style.display = "block";
whichEl.isExpanded=true;
}/*注4*/else {
whichEl.style.display = "none";
whichEl.isExpanded=false;
}/*注4*/
}


function expandIE2(el) {
whichEl=eval(el + "Child3");
whichIm=event.srcElement;
if (whichEl.style.display != "block") {//當(dāng)被點擊對象沒有展開下級菜單時，展開下級菜單
whichEl.style.display = "block";
whichEl.isExpanded=true;
whichArrow = eval(whichIm.Arr);
whichArrow.src = "../images/tocuparw.gif";
} else {//當(dāng)被點擊對象已經(jīng)展開下級菜單時，隱藏下級菜單
whichEl.style.display="none";
whichEl.isExpanded=false;
whichArrow = eval(whichIm.Arr);
whichArrow.src = http://cfan.net.cn/info/".images/tocdnarw.gif";
}
}
</SCRIPT>
<!--注1-->
<style>
A:link
{
 color:000000;
 text-decoration: none;
}
A:visited
{
 color:666666;
 text-decoration: none;
 }
Body
{
 background-repeat:repeat-y ;
 font-family:宋體,Arial;
}
.parent
{
 position:relative;
 display:block;
 font-weight:bold;
 font-size:9pt;
 padding:1pt;
 padding-left:8pt;
 width:168px;
 top:0;
 cursor:hand;
 margin-bottom:2;
}
.child1
{
 display:none;
 font-size:9pt;
 width:168px;
 padding-bottom:4pt;
 cursor:hand;
 margin-bottom:2;
}
.child2
{
 display:block;
 font-size:9pt;
 padding:1pt;
 width:168px;
 padding-left:14pt;
 cursor:hand;
 margin-bottom:2;
}
.child3
{
 display:block;
 font-size:9pt;
 padding:1pt;
 padding-left:20pt;
 width:168px;
 cursor:hand;
 margin-bottom:2;
}
.child4
{
 display:block;
 font-size:9pt;
 width:168px;
 cursor:hand;
 margin-bottom:2;
}
.master
{
 position:relative;
 display:block;
 padding:1pt;
 width:168px;
 padding-top:12px;
}
#Navigation
{
 position:absolute;
 top:101;
 left:0;
 z-index:1;
 width:170px;
 height:340px;
 overflow:auto;
}
</style>
<BASE TARGET="SubMain">
</head>
<Body onload="navOnload();this.focus();" LEFTMARGIN="0" TOPMARGIN="0" bgcolor="White" background="bluetoc.gif" text="Black" link="Black" vlink="#005BAA">
<DIV ID="Navigation">
<DIV ID="MasterOne" CLASS="Master">
<A href="wrkwfile/mainwork.htm">
<DIV ID="Files" onkeypress="expandIE('etuOne');mouseDown()" onClick="expandIE('etuOne')" CLASS="parent">
處理文件
</DIV>
</A>
<DIV ID="etuOneChild1" CLASS="child1">
<A href="wrkwfile/trakdocs.htm">
<DIV onkeypress="expandIE2('etuTwo');mouseDown()" onClick="expandIE2('etuTwo')" ID="Track" CLASS="child2" Arr="Arrow1">
<IMG id="Arrow1" src=http://cfan.net.cn/info/".images/tocdnarw.gif" width="9" height="9" border="0" alt="" align="middle" hspace="0">
跟蹤文檔
</DIV>
</A>
<DIV ID="etuTwoChild3" CLASS="child4" style="display:none" Arr="Arrow1">
<A href="wrkwfile/mynetwrk.htm">
<DIV ID="MyNet" CLASS="child3" onkeypress="mouseDown();">
網(wǎng)上鄰居
</DIV>
</A><A href="wrkwfile/mydocs.htm">
<DIV ID="Mydocs" CLASS="child3" onkeypress="mouseDown();">
我的文檔
</DIV>
</A><A href="wrkwfile/opensave.htm">
<DIV ID="Open" CLASS="child3" onkeypress="mouseDown();">
文件打開/另存為
</DIV>
</A><A href="wrkwfile/history.htm">
<DIV ID="Histroy" CLASS="child3" onkeypress="mouseDown();">
歷史文件夾
</DIV>
</A>
</DIV>
<A href="wrkwfile/associat.htm">
<DIV ID="Assoc" CLASS="child2" onkeypress="mouseDown();">
關(guān)聯(lián)文件類型
</DIV>
</A><A href="wrkwfile/imageman.htm">
<DIV ID="Imageman" CLASS="child2" onkeypress="mouseDown();">
處理圖像
</DIV>
</A><A href="wrkwfile/rdyavprt.htm">
<DIV ID="Readily" CLASS="child2" onkeypress="mouseDown();">
管理打印
</DIV>
</A>
</DIV>
<A href="findinfo/mainfind.htm">
<DIV ID="Find" onKeypress="expandIE('etuThree');mouseDown()" onClick="expandIE('etuThree')" CLASS="parent">
查找信息
</DIV>
</A>
<DIV ID="etuThreeChild1" CLASS="child1">
<A href="findinfo/indexing.htm">
<DIV ID="Index" CLASS="child2" onkeypress="mouseDown();">
索引內(nèi)容
</DIV>
</A><A href="findinfo/search.htm">
<DIV ID="Search" CLASS="child2" onkeypress="mouseDown();">
集成搜索
</DIV>
</A><A href="findinfo/actsrch.htm">
<DIV ID="ActSear" CLASS="child2" onkeypress="mouseDown();">
Active Directory
</DIV>
</A>
</DIV>
<A href="personal/mainprsn.htm">
<DIV ID="Person" onkeypress="expandIE('etuFour');mouseDown()" onClick="expandIE('etuFour')" CLASS="parent">
個人化
</DIV>
</A>
<DIV ID="etuFourChild1" CLASS="child1">
<A href="personal/strtmenu.htm">
<DIV ID="StartM" CLASS="child2" onkeypress="mouseDown();">
開始菜單
</DIV>
</A><A href="personal/custtlbr.htm">
<DIV ID="Custo" CLASS="child2" onkeypress="mouseDown();">
工具欄
</DIV>
</A><A href="personal/actdsktp.htm">
<DIV ID="Acti" CLASS="child2" onkeypress="mouseDown();">
活動桌面
</DIV>
</A><A href="personal/access.htm">
<DIV ID="Acc" CLASS="child2" onkeypress="mouseDown();">
輔助向?qū)?br></DIV>
</A><A href="personal/multlang.htm">
<DIV ID="Multi" CLASS="child2" onkeypress="mouseDown();">
多語言技術(shù)
</DIV>
</A>
</DIV>
<A href="wrkonweb/mainwork.htm">
<DIV ID="Web" onkeypress="expandIE('etuFive');mouseDown()" onClick="expandIE('etuFive')" CLASS="parent">
在 Web 上工作
</DIV>
</A>
<DIV ID="etuFiveChild1" CLASS="child1">
<A href="wrkonweb/inetcwiz.htm">
<DIV ID="inetCon" CLASS="child2" onkeypress="mouseDown();">
Internet 連接向?qū)?br></DIV>
</A><A href="wrkonweb/favui.htm">
<DIV ID="FavUI" CLASS="child2" onkeypress="mouseDown();">
個人收藏夾窗格
</DIV>
</A>
</DIV>
<A href="workremo/mainremo.htm">
<DIV ID="Remote" onkeypress="expandIE('etuSix');mouseDown()" onClick="expandIE('etuSix'); mouseDown();" CLASS="parent">
遠程工作
</DIV>
</A>
<DIV ID="etuSixChild1" CLASS="child1">
<A href="workremo/remotely.htm">
<DIV ID="Remotely" onkeypress="expandIE2('etuSeven');mouseDown()" onClick="expandIE2('etuSeven')" Arr="Arrow2" ID="" CLASS="child2">
<IMG id="Arrow2" src=http://cfan.net.cn/info/".images/tocdnarw.gif" width="9" height="9" border="0" alt="" align="middle" hspace="0">
脫機工作
</DIV>
</A>
<DIV ID="etuSevenChild3" CLASS="child4" style="display:none" Arr="Arrow2">
<A href="workremo/offlnfld.htm">
<DIV ID="Offfile" CLASS="child3" onkeypress="mouseDown();">
脫機文件
</DIV>
</A><A href="workremo/offlnwb.htm">
<DIV ID="Offweb" CLASS="child3" onkeypress="mouseDown();">
脫機瀏覽 Web
</DIV>
</A><A href="workremo/syncman.htm">
<DIV ID="Sync" CLASS="child3" onkeypress="mouseDown();">
同步管理器
</DIV>
</A>
</DIV>
<A href="workremo/netconmn.htm">
<DIV ID="NetCon" CLASS="child2" onkeypress="mouseDown();">
網(wǎng)絡(luò)和撥號連接文件夾
</DIV>
</A><A href="workremo/efs.htm">
<DIV ID="Efs" CLASS="child2" onkeypress="mouseDown();">
加密文件系統(tǒng)
</DIV>
</A><A href="workremo/conspowr.htm">
<DIV ID="Cons" CLASS="child2" onkeypress="mouseDown();">
電源管理
</DIV>
</A><A href="workremo/infrared.htm">
<DIV ID="Infra" CLASS="child2" onkeypress="mouseDown();">
自動紅外支持
</DIV>
</A>
</DIV>
</DIV>
</DIV>
<IFRAME src="etu_main.htm" name="SubMain" scrolling="auto" width="470" height="100%" marginwidth="4" marginheight="4" frameborder="No" style="position:relative; top:2; left:180;"></IFRAME>
</Body>
</html>
<!--
本代碼中菜單結(jié)構(gòu)如下圖：

*************************************************************************************
* *
*處理文件-------------------------------------------------------------CLASS="parent"*
* 跟蹤文檔-------------------------------CLASS="child2"--|*
* 網(wǎng)上鄰居--CLASS="child3"--||*
* 我的文檔--CLASS="child3"||*
* 文件....--CLASS="child3"|-CLASS="child4" |*
* 歷史....--CLASS="child3"__||-CLASS="child1" *
* 關(guān)聯(lián)文件類型---------------------------CLASS="child2"|*
* 處理圖像-------------------------------CLASS="child2"|*
* 管理打印-------------------------------CLASS="child2"__|*
*查找信息-------------------------------------------------------------CLASS="parent"*
* 索引內(nèi)容-------------------------------CLASS="child2"--|*
* 集成搜索-------------------------------CLASS="child2"|-CLASS="child1" *
* Active Directory-----------------------CLASS="child2"__|*
*個人化---------------------------------------------------------------CLASS="parent"*
* 開始菜單-------------------------------CLASS="child2"--|*
* 工具欄---------------------------------CLASS="child2"|*
* 活動桌面-------------------------------CLASS="child2"|-CLASS="child1" *
* 輔助向?qū)?------------------------------CLASS="child2"|*
* 多語言技術(shù)-----------------------------CLASS="child2"__|*
*在 Web 上工作--------------------------------------------------------CLASS="parent"*
* Internet 連接向?qū)?---------------------CLASS="child2"--|*
* 個人收藏夾窗格-------------------------CLASS="child2"__|-CLASS="child1" *
*遠程工作-------------------------------------------------------------CLASS="parent"*
* 脫機工作-------------------------------CLASS="child2"--|*
* 脫機文件--CLASS="child3"--||*
* 脫機瀏覽--CLASS="child3"|-CLASS="child4" |*
* Web ....--CLASS="child3"__||*
* 網(wǎng)絡(luò)和撥號連接文件夾-------------------CLASS="child2"|-CLASS="child1" *
* 加密文件系統(tǒng)---------------------------CLASS="child2"|*
* 電源管理-------------------------------CLASS="child2"|*
* 自動紅外支持---------------------------CLASS="child2"__|*
* *
*************************************************************************************

上圖中，每個 Class 定義了一個層，在 JavaScript 及 CSS 中，對層進行操作。每個層的 Class 名稱標志了他們在菜單中的相對位置。
定義：child2、child3 和 parent 各自標志了一個層，我們稱它為“單位”（其實我也不知道準確的名稱應(yīng)該是什么，姑且先這么叫吧:-)），而 child1 和 child4 則標志了處于同一相對位置的幾個子層所組成的父層，我們稱它為“集合”。
注1：原(M$)文件中引用了../Javax.htm 及 ../NAVSTYLE.CSS 兩個文件，為敘述方便，上述兩個文件中與本文有關(guān)的代碼被直接添加到本文中。
注2：原(M$)代碼中此處有一語句"window.event.cancelbubble == true;"，我沒看懂，刪了~~
注3：原(M$)代碼中條件還包含"(divColl(i).className == "child4")||"，我實在沒看明白有什么作用，刪了，有知道的大蝦還請指教；
注4：原(M$)代碼中不包含此部分代碼，我加上的，讓 parent 也能主動關(guān)閉。
最后還有一點說明，在每一個有子菜單的層上加一個語句onmouseOver="...","..."就是onClick里邊的東東，試試看，你看到了什么？
-->
<!--CopyRight By Cheery_Ke,04-07-2002,All Reserved-->

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

本類教程下載

系統(tǒng)下載排行

網(wǎng)站地圖xml | 網(wǎng)站地圖html
主站蜘蛛池模板： 崇礼县| 兴业县| 赤峰市| 星子县| 铜川市| 沙田区| 牙克石市| 北票市| 宣化县| 西乡县| 惠来县| 桐梓县| 浠水县| 玉山县| 中西区| 洪泽县| 巴青县| 洱源县| 长春市| 信丰县| 呈贡县| 昌图县| 翁牛特旗| 宜城市| 达州市| 和平区| 明溪县| 岳阳县| 文山县| 革吉县| 浠水县| 邹城市| 新兴县| 福清市| 大石桥市| 南郑县| 常熟市| 苏尼特右旗| 彭泽县| 定边县| 故城县|