
效果:使用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è)面中刪除即可。
代碼:
注意:在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;
}
您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。