有趣的思路~~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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20%3E%20%0D%0A%2F%2Fdocument.documentElement.clientHeight%2B'px'%20%0D%0A%2F%2F%20%20onload%E7%9A%84%E6%97%B6%E5%80%99%E5%A3%B0%E6%98%8E%E5%AF%B9%E8%B1%A1%20%0D%0Avar%20obj%20%3D%20new%20Object%3B%20%0D%0Afunction%20oload()%7B%20%0D%0A%20obj%20%3D%20document.getElementById('topFill')%3B%20%0D%0A%20obj.style.display%20%3D%20'none'%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20cl()%7B%20%0D%0A%20document.body.style.overflow%20%3D%20'hidden'%3B%20%0D%0A%20document.body.style.height%20%3D%20document.documentElement.clientHeight%20%2B%20'px'%3B%20%0D%0A%20obj.style.display%20%3D%20'block'%3B%20%0D%0A%20obj.style.height%20%3D%20document.documentElement.clientHeight%20%2B%20'px'%3B%20%0D%0A%7D%20%0D%0Afunction%20bcl()%7B%20%0D%0A%20document.body.style.overflow%20%3D%20''%3B%20%0D%0A%20obj.style.display%20%3D%20'none'%3B%20%0D%0A%7D%20%0D%0Afunction%20oresize()%7B%20%0D%0A%20if(obj.style.display%20!%3D%20'block')%7B%20%0D%0A%20%20%20%0D%0A%20%7Delse%7B%20%0D%0A%20%20cl()%3B%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0Afunction%20isno(str)%7B%20%0D%0A%20if%20(str%20%3D%3D%20'yes')%7B%20%0D%0A%20%20window.close()%3B%20%0D%0A%20%7Delse%20%7B%20%0D%0A%20%20bcl()%3B%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head>

<body onload="oload()" onresize="oresize()"> 
<div id="topFill"> 
 <div id="alertBox"> 
  <div id="alertTitle">警告!</div> 
  <div id="alertContent">你确定要退出吗?</div> 
  <div 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

　　到这里大家应该很清楚了吧

教程首页更多教程