收藏私塾在线
 

欢迎您来到私塾在线网!   

请登录! 

免费注册 

交流首页 » Web前端技术 »JavaScript仿Windows关机效果  XML
发表人 内容
潜龙
[头像]

交流经验:
总积分:35429
级别:VIP5
注册时间: 2011-11-10
文章: 160
离线

基本原理分析

Windows关机效果分析

使用Windows系统的用户在关机的时候,出现的界面只允许用户选择关机、注销或取消动作,而桌面上的程序都不能使用,并且屏幕呈现灰色状态。

本例将仿照这种高亮显示的效果在网页上实现.

在网页上运用这种关机效果有什么好处呢?首先,由于单击某一链接后,将用户此时不可用的操作隐藏在后台,将可用的操作放在屏幕最上层,并高亮显示,可以避免用户的误操作。其次,将信息高亮显示,也可以提醒用户应该注意的事项。

网页中实现关机效果分析

在网页中实现这种效果的原理很简单。创建两个图层,一个为遮盖层,覆盖整个页面,并且显示为灰色;另一个图层作为高亮显示的部分,在遮盖层的上方,这可通过设置图层的z-index属性来设置。当取消关机效果后,只需将这两个图层元素在页面中删除即可。


html代码:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
<meta http-equiv="Content-Type" content="text/html" charset="gb2312"> 
</head> 

<body leftmargin=0 topmargin=0> 
<div id="bgLayer" style="position:absolute;background:#CCCCCC;top:0px;width:100%;height:100%;filter:alpha(style=0,opacity=50);display:none;z-index:9998;"> </div> 
<div id="topLayer" style="position:absolute;background:#999999;top:0px;width:420px;height:150px;display:none;z-index:9999;"> 
<table width=100% height=100% bgcolor="#FFFFFF" style="position:relative;top:-5px;left:-5px;border:solid #999999 1px;"> 
<tr> 
<td><center><input type="button" value="确 定" onclick="javaScript:hideEdit();"></center></td> 
</tr> 
</table> 
</div> 
<br><br><br> 
<p> 
<center> 
<input type="button" value="显 示" onclick="javaScript:showEdit();"> 
</center> 
<script language="JavaScript"> 
<!-- 
function showEdit(id){ 
document.all["bgLayer"].style.display=""; 
document.all["bgLayer"].style.height=document.body.scrollHeight; 
document.all["topLayer"].style.display=""; 
timer=setInterval(move,"50"); 
} 
function hideEdit(){ 
clearInterval(timer); 
document.all["bgLayer"].style.display="none"; 
document.all["topLayer"].style.display="none"; 
} 
function move(){ 
document.all["topLayer"].style.top=document.body.scrollTop+document.body.clientHeight/2-110; 
document.all["topLayer"].style.left=document.body.scrollLeft+document.body.clientWidth/2-200; 
} 
//--> 
</script> 
</body> 
</html>




推广链接
精品视频课程推荐

Java数据结构和算法精讲版
本课程专注于数据结构和算法的内容,使用Java来进行代码示例,不空洞的讲解概念和理论,重点放在代码的实现和示例上。 从零开始、全面系统、成体系的讲解数据结构和基本算法,循序渐进的讲述构建软件系统所常见的数据结构和算法。

Spring3开发实战-独家视频教程
从零到精通Spring3的开发知识;IoC/DI的思想、IoC/DI的运行流程、IoC/DI的开发指导、AOP的思想、AOP的运行流程、AOP应用的设计、Spring对JDBC和Hibernate的支持、Spring的事务、SSH的集成应用

研磨设计模式——跟着cc学设计系列视频教程
本视频课程是北京Java私塾原创精品书籍《研磨设计模式》一书的配套学习视频,由《研磨设计模式》的第一作者CC录制 课程目标:全面、系统的掌握GoF设计模式的知识,达到可以在实际项目开发中运用的能力 技术要点:如何实现可配置、如何实现缓存以及缓存的管理、如何实现用缓存来控制多实例的创建、如何实现参数化工厂、 如何实现可扩展工厂、如何实现原型管理器、如何实现Java的静态代理和动态代理、如何实现多线程处理队列请求、 如何实现命令的参数化配置、可撤销的操作、宏命令、队列请求和日志请求、如何实现翻页迭代、如何检测环状结构、 如何实现通用的增删改查、如何模拟工作流来处理流程、如何实现简单又通用的XML读取、如何实现模拟AOP的功能......

Javascript基础视频教程
JavaScript的内置对象--Array、String、Date、Math等,可以通过DOM对象进行对象控制,创建控制菜单及复选框的控制,创建二级联动列表框及列表框选项的移动,JavaScript项目,创建基于JS的商品管理系统。

XML基础视频教程
创建规范的XML文档,DTD的作用,并且可以根据要求创建私用的DTD,通过JavaScript解析XML DOM



个性签名:知人者智,自知者明。
 
交流首页 » Web前端技术
前往:   

关于我们 | 联系我们 | 用户协议 | 私塾在线服务协议 | 版权声明 | 隐私保护

版权所有 Copyright(C)2009-2012 私塾在线学习网