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

2024-09-06 12:44:41

字體：大中小

來源：轉載

供稿：網友

由于以前見很多人的這中仿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>  </head> <body onload="oload()" onresize="oresize()">      警告!   你確定要退出嗎?   <input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" />    <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';

上一篇：網頁取色

下一篇：Using the TextRange Object