提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS思路 效果 桌面 有趣 注销 winxp 渐隐
2023-06-13 09:13:46 时间
由于以前见很多人的这中仿XP渐隐效果都不是很逼真.我这几天偶然想到了一个思路

..嘿嘿..很有趣哦

看看大家能看懂不~~应该可以的吧~~HOHO..

思路概括一句话就是.. 不管整个文档有多长,让body的 滚动条消失,让遮罩层覆盖整个窗体可见区域!

这 "可见"二字非常重要哦!! 



只大致的做出来效果..没有很美化它..呵呵.剩下的 timeout 让 遮罩渐变啦什么用的时候再加就好 

下面是代码

如果好的话.麻烦斑竹给加加分 .嘿嘿 tks哈
无标题文档 警告!
你确定要退出吗?

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法

呵呵阿斗司法



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

相关文章