快捷導(dǎo)航

有趣的思路~~JS仿 WINXP 注銷桌面漸隱效果

更新時(shí)間：2006年10月24日 00:00:00 作者：

由于以前見很多人的這中仿XP漸隱效果都不是很逼真.我這幾天偶然想到了一個(gè)思路

..嘿嘿..很有趣哦

看看大家能看懂不~~應(yīng)該可以的吧~~HOHO..

思路概括一句話就是.. 不管整個(gè)文檔有多長(zhǎng),讓body的滾動(dòng)條消失,讓遮罩層覆蓋整個(gè)窗體可見區(qū)域!

這 '可見'二字非常重要哦!!

只大致的做出來效果..沒有很美化它..呵呵.剩下的 timeout 讓遮罩漸變啦什么用的時(shí)候再加就好

下面是代碼

如果好的話.麻煩斑竹給加加分 .嘿嘿 tks哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標(biāo)題文檔</title> <style>  body{margin:0;padding:0;}  #topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;}  #alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666}  #alertTitle{height:20px;background-color:#EDF8B8;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D}  #alertContent{padding:42px 0;;text-align:center;}  #alertBtn{text-align:center;}   #alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;} </style>  </head> <body onload="oload()" onresize="oresize()"> <div   class="vvxyksv9kd"   id="topFill">  <div   class="vvxyksv9kd"   id="alertBox">   <div   class="vvxyksv9kd"   id="alertTitle">警告!</div>   <div   class="vvxyksv9kd"   id="alertContent">你確定要退出嗎?</div>   <div   class="vvxyksv9kd"   id="alertBtn"><input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" /></div>  </div> </div> <input type="text" id="textaaa" /> <input type="button" value="點(diǎn)我" onclick="cl()"/> <h1>呵呵阿斗司法</h1> <p>呵呵阿斗司法</p> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1> <h1>呵呵阿斗司法</h1><h1>呵呵阿斗司法</h1><h1>呵呵阿斗司法</h1> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

頁(yè)面里面總共有三個(gè) 按鈕的 onclick 事件和一個(gè) body 的 onresize 事件

當(dāng)點(diǎn)擊 '點(diǎn)我' 那個(gè)按鈕的時(shí)候. js就執(zhí)行 cl 這個(gè)函數(shù)

復(fù)制代碼代碼如下:

function cl(){ 
document.body.style.overflow = 'hidden'; 
document.body.style.height = document.documentElement.clientHeight + 'px'; 
obj.style.display = 'block'; 
obj.style.height = document.documentElement.clientHeight + 'px'; 
} 

這個(gè)函數(shù)的意義就是   

我讓   body 這個(gè)標(biāo)簽的 overflow 屬性改為  ' hidden ' 很明顯,就是讓在body高度以外的 內(nèi)容隱藏...嘿嘿...... 

下一行 的意思也就足夠明顯啦..   讓 body的高度 = 當(dāng)前窗體的高度~~ 這樣由于 body 的 overflow  = 'hidden' 了..那么我給 body一個(gè)當(dāng)前窗體的高度的化,那么 滾動(dòng)條不就消失了嗎??嘿嘿嘿...這樣給我下一步的陰謀創(chuàng)造了條件哦.~~~ 

obj.style.display = 'block';這一句就是 讓遮罩層顯出來拉~~然后在給遮罩層一個(gè)高度,這個(gè)高度就是 窗體的高度~~這樣的話..HOHO....... 

這就讓文檔所有的內(nèi)容 都蓋到 遮罩層下面啦..~~~ 

然后 在給 body 的 onresize(當(dāng)窗體大小改變時(shí)觸發(fā)的事件) 一個(gè)函數(shù) 就是判斷 遮罩層當(dāng)前是否顯示啊..如果顯示的話就改遮罩層的大小等于當(dāng)前窗體大小.否則什么都不執(zhí)行...HOHO 
到這里大家應(yīng)該很清楚了吧 