由于以前见很多人的这中仿XP渐隐效果都不是很逼真.我这几天偶然想到了一个思路
..嘿嘿..很有趣哦
看看大家能看懂不~~应该可以的吧~~HOHO..
思路概括一句话就是..不管整个文档有多长,让body的滚动条消失,让遮罩层覆盖整个窗体可见区域!
这'可见'二字非常重要哦!!
只大致的做出来效果..没有很美化它..呵呵.剩下的timeout让遮罩渐变啦什么用的时候再加就好
下面是代码
如果好的话.麻烦斑竹给加加分.嘿嘿tks哈
无标题文档 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;} 警告! 你确定要退出吗? 呵呵阿斗司法
呵呵阿斗司法
呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法 呵呵阿斗司法呵呵阿斗司法呵呵阿斗司法
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
页面里面总共有三个按钮的onclick事件和一个body的onresize事件
当点击'点我'那个按钮的时候.js就执行cl这个函数
复制代码 代码如下:
functioncl(){
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仿 WINXP 注销桌面渐隐效果】相关文章：
★ 美化下拉列表