實(shí)現(xiàn)windows關(guān)機(jī)效果代碼
2024-08-26 00:15:17
供稿：網(wǎng)友
效果：使用Windows系統(tǒng)的用戶在關(guān)機(jī)的時(shí)候，出現(xiàn)的界面只允許用戶選擇關(guān)機(jī)、注銷或取消動(dòng)作，而桌面上的程序都不能使用，并且屏幕呈現(xiàn)灰色狀態(tài)。Windows關(guān)機(jī)效果如圖22.1所示。
網(wǎng)頁(yè)中使用此效果好處：在網(wǎng)頁(yè)上運(yùn)用這種關(guān)機(jī)效果有什么好處呢？首先，由于單擊某一鏈接后，將用戶此時(shí)不可用的操作隱藏在后臺(tái)，將可用的操作放在屏幕最上層，并高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應(yīng)該注意的事項(xiàng)。
原理：在網(wǎng)頁(yè)中實(shí)現(xiàn)這種效果的原理很簡(jiǎn)單。創(chuàng)建兩個(gè)圖層，一個(gè)為遮蓋層，覆蓋整個(gè)頁(yè)面，并且顯示為灰色；另一個(gè)圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過(guò)設(shè)置圖層的z-index屬性來(lái)設(shè)置。當(dāng)取消關(guān)機(jī)效果后，只需將這兩個(gè)圖層元素在頁(yè)面中刪除即可。
代碼：
<html>
<head>
<title>ajax關(guān)機(jī)效果</title>
<style type="text/css">
#lightbox {/*該層為高亮顯示層*/
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
Z-INDEX: 9999; /*設(shè)置該層在網(wǎng)頁(yè)的最上端,設(shè)置足夠大*/
BACKGROUND: #fdfce9; /*設(shè)置背景色*/
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
POSITION: absolute;
TOP: 50%;
HEIGHT: 400px;
TEXT-ALIGN: left
}
#overlay {/*該層為覆蓋層*/
DISPLAY: block;
Z-INDEX: 9998; /*設(shè)置高亮層的下方*/
FILTER: alpha(opacity=20); /*設(shè)置成透明*/
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000;
moz-opacity: 0.8;
opacity: .80
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--該層為覆蓋層 -->
<div id="overlay"></div>
<!--該層為高亮顯示層 -->
<div id="lightbox"><a href="#" onclick="javascript:f()">關(guān)閉</a> <a href="#" onclick="javascript:f1()">打開(kāi)</a></div>
</body>
</html>
<script>
function f()
{
document.getElementById("overlay").style.display="none";
}
function f1()
{
document.getElementById("overlay").style.display="block";
}
</script>
注意：在IE瀏覽器中如果有<select>標(biāo)記，則該標(biāo)記不能被覆蓋層覆蓋，但在其他瀏覽器中則可以覆蓋。圖22.3所示的是IE瀏覽器中<select>標(biāo)記的效果，圖22.4所示的是Mozzila Firefox中<select>標(biāo)記的效果。
圖22.3 IE瀏覽器中<select>標(biāo)記
圖22.4 Mozzila Firefox瀏覽器中<select> 標(biāo)記
所以在使用IE瀏覽器時(shí)，要先將網(wǎng)頁(yè)中的<select>元素隱藏起來(lái)。如以下代碼可以用于隱藏頁(yè)面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
