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

2019-11-21 02:29:25

字體：大中小

來源：轉載

供稿：網友

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

..嘿嘿..很有趣哦

看看大家能看懂不~~應該可以的吧~~HOHO..

思路概括一句話就是.. 不管整個文檔有多長,讓body的滾動條消失,讓遮罩層覆蓋整個窗體可見區域!

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

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

下面是代碼

如果好的話.麻煩斑竹給加加分 .嘿嘿 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>無標題文檔</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> <script type="text/javascript" > //document.documentElement.clientHeight+'px' //  onload的時候聲明對象 var obj = new Object; function oload(){  obj = document.getElementById('topFill');  obj.style.display = 'none'; } 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'; } function bcl(){  document.body.style.overflow = '';  obj.style.display = 'none'; } function oresize(){  if(obj.style.display != 'block'){     }else{   cl();  } } function isno(str){  if (str == 'yes'){   window.close();  }else {   bcl();  } } </script> </head> <body onload="oload()" onresize="oresize()"> <div   class="7p1j1lv"   id="topFill">  <div   class="prz595h"   id="alertBox">   <div   class="t1hlf5v"   id="alertTitle">警告!</div>   <div   class="v1jtzrn"   id="alertContent">你確定要退出嗎?</div>   <div   class="515zfpb"   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="點我" 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需刷新才能執行]

頁面里面總共有三個按鈕的 onclick 事件和一個 body 的 onresize 事件

當點擊 '點我' 那個按鈕的時候. js就執行 cl 這個函數

復制代碼代碼如下:

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'; 
} 

這個函數的意義就是   

我讓   body 這個標簽的 overflow 屬性改為  ' hidden ' 很明顯,就是讓在body高度以外的 內容隱藏...嘿嘿...... 

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

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

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

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