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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 有趣的思路~~JS仿 WINXP 注销桌面渐隐效果

Javascript: 用Javascript实现锚点(Anchor)间平滑跳转; 实现png图片和png背景透明（支持多浏览器）的方法; 一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能; 用DIV完美模拟createPopup 弹出窗口(修正版)，支持Firefox,ie,chrome; JavaScript 中级笔记第一章; IE与Firefox在JavaScript上的7个不同写法小结; MooTools 1.2介绍; Mootools 1.2教程(2) DOM选择器; Mootools 1.2教程(3) 数组使用简介; 在IE下获取object（ActiveX）的Param的代码; ExtJS 配置和表格控件使用; javascript 缓冲效果实现代码推荐; html数组字符串拼接的最快方法; JavaScript 浮动定位提示效果实现代码; 类似CSDN图片切换效果脚本; javascript 面向对象编程 function也是类; javascript 面向对象编程聊聊对象的事; javascript 面向对象编程 function是方法(函数); [原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]; jQuery slider Content(左右控制移动)

No. « ‹ 226 227 228 229 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 184 ::

收藏到网摘: n/a

xmlHTTP实例 Hutia 的 JS 代码集

由于以前见很多人的这中仿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>
呵呵阿斗司法
<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 全选提示:你可先修改部分代码,再按运行]

页面里面总共有三个按钮的 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 
到这里大家应该很清楚了吧 

xmlHTTP实例 Hutia 的 JS 代码集

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

评论 (0) All

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