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

更新时间：2006年10月24日 00:00:00 作者：

由于以前见很多人的这中仿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 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 
到这里大家应该很清楚了吧 

您可能感兴趣的文章:

浅谈微信JS-SDK 微信分享接口开发（介绍版）
这篇文章主要介绍了浅谈微信JS-SDK 微信分享接口开发（介绍版），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
JavaScript Split()方法
split()方法可以利用字符串的子字符串的作为分隔符将字符串分割为字符串数组，并返回此数组，本文给大家介绍javascript split 方法，对本文感兴趣的朋友一起学习吧
2015-12-12
完美实现八种js焦点轮播图（上篇）
这篇文章主要介绍了完美实现八种js焦点轮播图的具体资料，基于完美运动框架move2.js而完成的八种焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
今天小编就为大家分享一篇Layer组件多个iframe弹出层打开与关闭及参数传递的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript输入框字数实时统计更新
这篇文章主要介绍了JavaScript输入框字数实时统计更新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
源码分析Django的message组件
这篇文章主要介绍了源码分析Django的message组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
JS 实现10进制转换36进制的示例代码
这篇文章主要介绍了JS实现10进制转换36进制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
javascript引擎长时间独占线程造成卡顿的解决方案
这篇文章主要介绍了javascript引擎长时间独占线程造成卡顿的解决方案,需要的朋友可以参考下
2014-12-12
javascript实现很浪漫的气泡冒出特效
这篇文章主要为大家详细介绍了javascript实现很浪漫的气泡冒出特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-11-11
JavaScript中创建对象的7种模式详解
本文主要介绍了JavaScript中创建对象的7种模式，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具