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

网络编程 2024/9/29 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

由于以前见很多人的这中仿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>  </head> <body onload="oload()" onresize="oresize()">      警告!   你确定要退出吗?   <input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" />    <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仿,WINXP,注销桌面渐隐效果

标签：

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

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月29日

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

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

Hutia 的 JS 代码集

xmlHTTP实例

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接