用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 相关文章推荐
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
js重写方法的简单实现
Jul 10 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
JavaScript实现Excel表格效果
Feb 07 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php 浮点数比较方法详解
2017/05/05 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python通过post提交数据的方法
2015/05/06 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
装修致歉信
2014/01/15 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
多人股份制合作协议书
2016/03/19 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
canvas 中如何实现物体的框选
2022/08/05 Javascript