用JavaScript实现仿Windows关机效果


Posted in Javascript onMarch 10, 2007

基本原理分析

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

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

在网页上运用这种关机效果有什么好处呢?首先,由于单击某一链接后,将用户此时不可用的操作隐藏在后台,将可用的操作放在屏幕最上层,并高亮显示,可以避免用户的误操作。其次,将信息高亮显示,也可以提醒用户应该注意的事项。
网页中实现关机效果分析
在网页中实现这种效果的原理很简单。创建两个图层,一个为遮盖层,覆盖整个页面,并且显示为灰色;另一个图层作为高亮显示的部分,在遮盖层的上方,这可通过设置图层的z-index属性来设置。当取消关机效果后,只需将这两个图层元素在页面中删除即可。
以下代码实现显示关机效果。
<html>
<head>
<title>AJAX LightBox Sample</title>
<style type="text/css">
#lightbox {/*该层为高亮显示层*/
       BORDER-RIGHT: #fff 1px solid;
       BORDER-TOP: #fff 1px solid;
       DISPLAY: block; 
       Z-INDEX: 9999; /*设置该层在网页的最上端,设置足够大*/
       BACKGROUND: #fdfce9; /*设置背景色*/
       LEFT: 50%; 
       MARGIN: -220px 0px 0px -250px; 
       BORDER-LEFT: #fff 1px solid; 
       WIDTH: 500px; 
       BORDER-BOTTOM: #fff 1px solid; 
       POSITION: absolute; 
       TOP: 50%; 
       HEIGHT: 400px; 
       TEXT-ALIGN: left
}
#overlay {/*该层为覆盖层*/
      DISPLAY: block;
      Z-INDEX: 9998; /*设置高亮层的下方*/
      FILTER: alpha(opacity=80); /*设置成透明*/
      LEFT: 0px; 
      WIDTH: 100%; 
      POSITION: absolute; 
      TOP: 0px; 
      HEIGHT: 100%; 
      BACKGROUND-COLOR: #000; 
      moz-opacity: 0.8; 
      opacity: .80
}
</style>
</head>
<body>
<!--该层为覆盖层 -->
<div id="overlay"></div>
<!--该层为高亮显示层 -->
<div id="lightbox"></div>
</body>
</html>
需要注意的是,在IE浏览器中如果有<select>标记,则该标记不能被覆盖层覆盖,但在其他浏览器中则可以覆盖。

在使用IE浏览器时,要先将网页中的<select>元素隐藏起来。如以下代码可以用于隐藏页面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
       selects[i].style.visibility = visibility;
}

代码实现

客户端代码
客户端的页面上有两个链接,用户单击链接后,向服务器端发送请求,并将返回信息显示到高亮层上。客户端的网页文件代码如下所示:
<html>
<head>
<title>AJAX LightBox</title>
<!-- 本例使用的css样式表文件-->
<LINK href="lightbox.css" type=text/css rel=stylesheet>
<!--prototype类文件-->
<script type="text/javascript" src="js/prototype.js" ></script>
<!--本例使用的javascript代码-->
<script type="text/javascript" src="lightbox.js" ></script>
</head>
<body>
<DIV id=container>
<UL>
  <LI><A class=lbOn href="getInfo.jsp?id=one">One</A> 
  </LI>
  <LI><A class=lbOn href="getInfo.jsp?id=two">Two</A> 
  </LI>
</UL>
</div>
</body>
</html>

另外,还需要设置该页面所使用CSS样式。lightbox.css样式表文件代码如下所示:
#lightbox {
      BORDER-RIGHT: #fff 1px solid;
      BORDER-TOP: #fff 1px solid;
       DISPLAY: none; 
       Z-INDEX: 9999; 
       BACKGROUND: #fdfce9; 
       LEFT: 50%; 
       MARGIN: -220px 0px 0px -250px; 
       BORDER-LEFT: #fff 1px solid; 
       WIDTH: 500px; 
       BORDER-BOTTOM: #fff 1px solid; 
       POSITION: absolute; 
       TOP: 50%; 
       HEIGHT: 400px; 
       TEXT-ALIGN: left
}
UNKNOWN {
     POSITION: fixed
}
#overlay {
      DISPLAY: none;
      Z-INDEX: 5000; FILTER: alpha(opacity=80); 
      LEFT: 0px; 
      WIDTH: 100%; 
      POSITION: absolute; 
      TOP: 0px; 
      HEIGHT: 100%; 
      BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80
}
UNKNOWN {
    POSITION: fixed
}
.done#lightbox #lbLoadMessage {
      DISPLAY: none
}
.done#lightbox #lbContent {
      DISPLAY: block
}
.loading#lightbox #lbContent {
      DISPLAY: none
}
.loading#lightbox #lbLoadMessage {
       DISPLAY: block
}
.done#lightbox IMG {
      WIDTH: 100%; HEIGHT: 100%
}
客户端脚本
由于浏览器对图层的支持不同,所以首先要确定客户端浏览器的类型。以下代码可用于判断客户端的浏览器和操作系统。
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

function getBrowserInfo() {
       if (checkIt('konqueror')) {
            browser = "Konqueror";
            OS = "Linux";
       }
       else if (checkIt('safari')) browser = "Safari"
       else if (checkIt('omniWeb')) browser = "OmniWeb"
       else if (checkIt('opera')) browser = "Opera"
       else if (checkIt('Webtv')) browser = "WebTV";
       else if (checkIt('icab')) browser = "iCab"
       else if (checkIt('msie')) browser = "Internet Explorer"
       else if (!checkIt('compatible')) {
             browser = "Netscape Navigator"
            version = detect.charAt(8);
       }
       else browser = "An unknown browser";

       if (!version) version = detect.charAt(place + thestring.length);

       if(!OS) {
            if (checkIt('linux')) OS = "Linux";
            else if (checkIt('x11')) OS = "Unix";
            else if (checkIt('mac')) OS = "Mac"
            else if (checkIt('win')) OS = "Windows"
            else OS = "an unknown operating system";
       }
}

function checkIt(string) {
        place = detect.indexOf(string) + 1;
        thestring = string;
        return place;
}
下面看一下网页加载时需要添加的方法。有关网页加载和初始化方法代码如下:
//网页加载调用initialize和getBrowserInfo方法
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
//未加载时清空缓存
Event.observe(window, 'unload', Event.unloadCache, false);
//初始化方法
function initialize(){
        //调用该方法为该页添加覆盖层和高亮显示层
        addLightboxMarkup();
        //为每个可高亮显示的元素创建lightbox对象
        lbox = document.getElementsByClassName('lbOn');
        for(i = 0; i < lbox.length; i++) {
                    valid = new lightbox(lbox[i]);
        }
}

// 使用Dom方法创建覆盖层和高亮层
function addLightboxMarkup() {
        bod = document.getElementsByTagName('body')[0];
        overlay = document.createElement('div');
        overlay.id = 'overlay';
        lb = document.createElement('div');
        lb.id = 'lightbox';
        lb.className = 'loading';
        lb.innerHTML = '<div id="lbLoadMessage">' +
                                           '<p>Loading</p>' +
                                           '</div>';
        bod.appendChild(overlay);
        bod.appendChild(lb);
}
封装lightbox类
初始化数据时,为每个可高亮显示的链接创建了lightbox对象。该类的代码具体实现如下:
var lightbox = Class.create();  

lightbox.prototype = {
       yPos : 0,
       xPos : 0,
      //构造方法,ctrl为创建该对象的元素
       initialize: function(ctrl) {
              //将该元素的链接赋值给this.content
              this.content = ctrl.href;
              //为该元素添加onclick事件activate方法
              Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
              ctrl.onclick = function(){return false;};
       },

       //当单击链接时
       activate: function(){
              if (browser == 'Internet Explorer'){//判断为IE浏览器
                     this.getScroll();
                     this.prepareIE('100%', 'hidden');
                     this.setScroll(0,0);
                     this.hideSelects('hidden');//隐藏所有的<select>标记
              }
              //调用该类中的displayLightbox方法
              this.displayLightbox("block");
      },

      prepareIE: function(height, overflow){
            bod = document.getElementsByTagName('body')[0];
            bod.style.height = height;
            bod.style.overflow = overflow;

            htm = document.getElementsByTagName('html')[0];
            htm.style.height = height;
            htm.style.overflow = overflow; 
      },

      hideSelects: function(visibility){
           selects = document.getElementsByTagName('select');
           for(i = 0; i < selects.length; i++) {
                   selects[i].style.visibility = visibility;
            }
      },

      getScroll: function(){
            if (self.pageYOffset) {
                    this.yPos = self.pageYOffset;
            } else if (document.documentElement && document.documentElement.scrollTop){
                    this.yPos = document.documentElement.scrollTop; 
            } else if (document.body) {
                    this.yPos = document.body.scrollTop;
            }
      },

      setScroll: function(x, y){
            window.scrollTo(x, y); 
      },

      displayLightbox: function(display){
            //将覆盖层显示
            $('overlay').style.display = display;
            //将高亮层显示
            $('lightbox').style.display = display;
            //如果不是隐藏状态,则调用该类中的loadInfo方法
            if(display != 'none') this.loadInfo();
      },

      //该方法发送Ajax请求
      loadInfo: function() {
            //当请求完成后调用本类中processInfo方法
            var myAjax = new Ajax.Request(
          this.content,
          {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
           );

      },
      // 将返回的文本信息显示到高亮层上
      processInfo: function(response){
           //获得返回的文本数据
           var result = response.responseText;
           //显示到高亮层
           info = "<div id='lbContent'>" + result + "</div>";
           //在info元素前插入一个元素
           new Insertion.Before($('lbLoadMessage'), info)
           //改变该元素的class name的值
           $('lightbox').className = "done"; 
           //调用本类中actions方法
           this.actions();
           var ctrl=$('lightbox');
           //为高亮层添加事件处理方法reset
          Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);
           ctrl.onclick = function(){return false;};
      },
      //恢复初始状态 
      reset:function(){
            //隐藏覆盖层
           $('overlay').style.display="none";
           //清空返回数据
            $('lbContent').innerHTML="";
            //隐藏高亮层
           $('lightbox').style.display="none";
     },
     // Search through new links within the lightbox, and attach click event
     actions: function(){
           lbActions = document.getElementsByClassName('lbAction');
           for(i = 0; i < lbActions.length; i++) {
                   Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAs EventListener(this), false);
                   lbActions[i].onclick = function(){return false;};
           }

     }
}

提示:由于该对象比较复杂,读者可以仔细参阅代码的注释部分。

服务器端代码

服务器端首先获得查询中的“id”值,如果该值为null或为空,则设置为默认值。然后判断该值,并且返回相应的一段字符串信息。处理请求的getInfojsp页面代码如下:
<%@ page language="java" import="java.util.*"%>
<%
//获得请求中id的值
  String imgID = request.getParameter("id");
  if (imgID==null||imgID.equals(""))//如果为null或为空
      imgID="one";//设定为默认值
  if ( imgID.equals("one"))//如果为one
  {
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces 
  605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100 
  km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph). 
  With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only 
  offered with a six-speed manual transmission, in contrast to its rival the 
  Ferrari Enzo that is only offered with sequential manual transmission. Also 
  the Carrera GT is significantly less expensive than the Ferrari Enzo. The 
  Ferrari Enzo is priced around $660,000 to the Carrera GT's $440,000. The 
  Carrera GT is known for its high quality and reliability which makes it one of 
  the best supercars ever.
<%}else{//否则
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari. 
  The name, which means "red head", comes from the red painted cylinder heads on 
  the flat-12 engine. The engine was technically a 180?V engine since it shared 
  flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291 
  kW), and the car won many comparison tests and admirers - it was featured on 
  the cover of Road & Track magazine nine times in just five years. Almost 
  10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the 
  most common Ferrari models despite its high price and exotic design.
<%}%>

Javascript 相关文章推荐
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
js分页工具实例
Jan 28 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
Javascript中的Split使用方法与技巧
Mar 09 #Javascript
用JavaScript事件串连执行多个处理过程的方法
Mar 09 #Javascript
一个不错的用JavaScript实现的UBB编码函数
Mar 09 #Javascript
B/S开发中常用javaScript技术与代码
Mar 09 #Javascript
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 #Javascript
超级兔子让浮动层消失的前因后果
Mar 09 #Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 #Javascript
You might like
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python中装饰器学习总结
2018/02/10 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Python bytes string相互转换过程解析
2020/03/05 Python
对python中各个response的使用说明
2020/03/28 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
C#实现启动一个进程
2016/10/01 面试题
2015年会计年终工作总结
2015/05/26 职场文书
美容院管理规章制度
2015/08/05 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript