av网站免费线看精品_国产做a爱视频免费不_深爱激情网开心五月天_伊人五月天在线视频网
 
慧網(wǎng)動態(tài) 常見問題 網(wǎng)絡(luò)營銷 網(wǎng)站設(shè)計 行業(yè)動態(tài) 網(wǎng)站優(yōu)化
DHTML模擬菜單
發(fā)布時間：2005-03-31　　　瀏覽次數(shù)：1229195
{ 在以前的ＨＴＭＬ里，元素的位置只能依次排列，我們很難地定位與控制網(wǎng)頁中的一些元素。ＣＳＳ２Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ Ｌｅｖｅｌ ２，層疊樣式單第二版的布局Ｌａｙｏｕｔ屬性出現(xiàn)并得到瀏覽器的廣泛支持之后，我們不僅可以靜態(tài)地實現(xiàn)以上目的，而且可以根據(jù)鼠標(biāo)、鍵盤、時間等預(yù)定義好的外界事件動態(tài)地改變布局。時下非常流行的網(wǎng)頁中“活動的層”便是它的一種形象的運(yùn)用，我們這里要講的是如何運(yùn)用這些屬性結(jié)合一些ＤＨＴＭＬ對象在網(wǎng)頁中實現(xiàn)類似Ｗｉｎｄｏｗｓ窗口的下拉菜單（如圖所示）。請看以下代碼及詳細(xì)說明。 ＜－－ 以下部分應(yīng)該插在代碼的＜ｈｅａｄ＞之后 －－＞ ＜ｓｔｙｌｅ＞＜－－ ／ 這是一些ＣＳＳ樣式。其中″ｂｔｎＴＤ″是按鈕在被按下之前“凸起”的樣式類：邊框被設(shè)置為寬度為１個像素的實線，其中左邊框和上邊框顏色為淺色（這里為白色），右下邊框為深色（深灰色），如果背景為灰色的ＨＴＭＬ元素（如單元格）使用這個樣式的話，那非常像一個“凸出”的按鈕；“ｂｔｎＤＴＤ”是按鈕被按下時“凹下”的樣式。 ／ ．ｂｔｎＴＤ  ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃８０８０８０  ．ｂｔｎＤＴＤ  ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ  ｔｄ  ｆｏｎｔ－ｆａｍｉｌｙ 宋體 ｆｏｎｔ－ｓｉｚｅ ９ｐｔ  －－＞＜／ｓｔｙｌｅ＞ ＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″ＪａｖａＳｃｒｉｐｔ″＞＜－－ ／／判斷哪個按鈕被按下的全局變量 ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０ ／／鼠標(biāo)經(jīng)過、離開、點擊更改單元格ＣＳＳ樣式的函數(shù) ｆｕｎｃｔｉｏｎ ｍＯｖｒＯｕｔｏｂｊＳｒｃ ｖａｒ ａｒｇｖａｒｇｃｂｌｎＡｃｔｉｖｅｓｔｒＣｏｌｏｒｓｔｒＢｇＣｏｌｏｒｓｔｒＣｌａｓｓｓｔｒＣｌａｓｓＤｓｔｒＣｕｒｓｏｒ ａｒｇｖ＝ｍＯｖｒＯｕｔ．ａｒｇｕｍｅｎｔｓａｒｇｃ＝ａｒｇｖ．ｌｅｎｇｔｈ ／默認(rèn)情況下不將當(dāng)前對象置為“”／ ｂｌｎＡｃｔｉｖｅ＝ａｒｇｃ＞１﹖ｅｖａｌａｒｇｖ［１］ｆａｌｓｅ ／默認(rèn)鼠標(biāo)經(jīng)過當(dāng)前對象的樣式為“凸出的按鈕形”／ ｓｔｒＣｌａｓｓ＝ａｒｇｃ＞２ ＆＆ ａｒｇｖ［２］＝′′﹖ａｒｇｖ［２］′ｂｔｎＴＤ′ ／默認(rèn)鼠標(biāo)點擊的時候當(dāng)前對象為“凹下的按鈕形”／ ｓｔｒＣｌａｓｓＤ＝ａｒｇｃ＞３ ＆＆ ａｒｇｖ［３］＝′′﹖ａｒｇｖ［３］′ｂｔｎＤＴＤ′ ／將當(dāng)前對象時候的前景色為白色、背景色為藍(lán)色、鼠標(biāo)樣式為手形／ ｓｔｒＣｏｌｏｒ＝′＃ｆｆｆｆｆｆ′ｓｔｒＢｇＣｏｌｏｒ＝′＃００００８０′ｓｔｒＣｕｒｓｏｒ＝′ｈａｎｄ′ ／ＩＥ４及其更高版本才支持這些ＪａｖａＳｃｒｉｐｔ對ＣＳＳ樣式的動態(tài)改變／ ｉｆｄｏｃｕｍｅｎｔ．ａｌｌ ／／將當(dāng)前對象的鼠標(biāo)樣式置為參數(shù)傳遞值 ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ ／／如果是鼠標(biāo)進(jìn)入當(dāng)前對象范圍 ｉｆｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓｅｖｅｎｔ．ｆｒｏｍＥｌｅｍｅｎｔ ／設(shè)置為活動樣式／ ｉｆｂｌｎＡｃｔｉｖｅ ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝ｓｔｒＢｇＣｏｌｏｒｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝ｓｔｒＣｏｌｏｒ  ／當(dāng)前對象不需要置為活動樣式的時候，如果本來的樣式是“凸出的按鈕形”則置為“凹下的按鈕形”，反之亦然／ ｅｌｓｅ ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝ｉｎｔＢｌｎＣｌｋ＝０﹖ｓｔｒＣｌａｓｓＤｓｔｒＣｌａｓｓ  ／／鼠標(biāo)離開當(dāng)前對象區(qū)域 ｅｌｓｅ ｉｆｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓｅｖｅｎｔ．ｔｏＥｌｅｍｅｎｔ ／／將這些樣式置為默認(rèn)值 ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝′′ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝′′ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝′′   ／ 顯示／隱藏層的通用函數(shù)。用ｏｂｊＮＳ、ｏｂｊＩＥ、ｓｔｒＳｔｕ作為參數(shù)，其中ｏｂｊＮＳ和ｏｂｊＩＥ分別是Ｎｅｔｓｃａｐｅ和ＩＥ的“層”對象，ｓｔｒＳｔｕ為層的狀態(tài)。因為篇幅所限，請查看本文尾部說明。 ／ ｆｕｎｃｔｉｏｎ ｓｈｏＨｉｄＬａｙｅｒｓ ／ 調(diào)用上面的函數(shù)，顯示／隱藏參數(shù)傳遞的層，這樣是為了簡化代碼。這里不給出詳細(xì)函數(shù)。／ ｆｕｎｃｔｉｏｎ ｓｈｏｗＬａｙｅｒｉｎｔＣｕｒｒｅｎｔ ／／－－＞＜／ｓｃｒｉｐｔ＞＜／ｈｅａｄ＞ ＜ｂｏｄｙ ｏｎＭｏｕｓｅＤｏｗｎ＝″ｉｆｗｉｎｄｏｗ．ｅｖｅｎｔ．ｓｒｃＥｌｅｍｅｎｔ．ｓｔｙｌｅ．ｃｏｌｏｒ＝＝′′ ｓｈｏｗＬａｙｅｒ１′ｈｉｄｅ′″＞ ＜－－ 以上ｂｏｄｙ部分的作用是當(dāng)鼠標(biāo)沒有按下任何按鈕的時候隱藏所有應(yīng)該隱藏的“菜單”。以下是兩個用ＣＳＳ布局定義的層，名為“ｍｅｎｕ”的層的初始狀態(tài)為：在屏幕上的位置為（１２１２），可視，層ｚ－ｉｎｄｅｘ屬性為１００；“ｍｅｎｕ１”為不可視。 －－＞ ＜ｄｉｖ ｉｄ＝″ｍｅｎｕ″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎａｂｓｏｌｕｔｅｖｉｓｉｂｉｌｉｔｙ ｖｉｓｉｂｌｅｌｅｆｔ１２ｐｘｔｏｐ１２ｐｘ ｚ－ｉｎｄｅｘ １００″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″１″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｂｏｒｄｅｒｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″＞ ＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｏｎＣｌｉｃｋ＝″ｍＯｖｒＯｕｔｔｈｉｓｆａｌｓｅ′ｂｔｎＤＴＤ′ｓｈｏｗＬａｙｅｒ１″＞天極網(wǎng)＜／ｔｄ＞＜／ｔｒ＞ ＜／ｔａｂｌｅ＞＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝″ｍｅｎｕ１″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎａｂｓｏｌｕｔｅｖｉｓｉｂｉｌｉｔｙ ｈｉｄｄｅｎｌｅｆｔ１１ｐｘｔｏｐ３４ｐｘ ｚ－ｉｎｄｅｘ １″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｃｌａｓｓ＝″ｂｔｎＴＤ″＞ ＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔｔｈｉｓｔｒｕｅ″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｗｉｄｔｈ＝″１００％″ｎｏｗｒａｐ ｏｎＣｌｉｃｋ＝″ｗｉｎｄｏｗ．ｌｏｃａｔｉｏｎ＝′ｈｔｔｐ／／ｗｗｗ．ｐｃｗｃｌｕｂ．ｃｏｍ／′ｓｈｏｗＬａｙｅｒ１′ｈｉｄｅ′″＞電腦報讀者俱樂部＜／ｔｄ＞＜／ｔｒ＞ ＜／ｔａｂｌｅ＞＜／ｄｉｖ＞ 因為篇幅所限，一些函數(shù)不能詳細(xì)給出及說明，如果需要完整代碼請訪問以下鏈接：ｈｔｔｐ／／ｃｔｓｉｇｈｔ．ｔｏｐｃｏｏｌ．ｎｅｔ／ｄｏｃｕｍｅｎｔｓ／ｍｅｎｕ．ｈｔｍｌ。
立即預(yù)約