有趣的思路~~JS仿 WINXP 注销桌面渐隐效果

由于以前见很多人的这中仿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（）">警告！ 你确定要退出吗？ <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> 呵呵阿斗司法<br/> <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
到这里大家应该很清楚了吧