用JavaScript实现仿Windows关机效果

2009-12-16 23:54| 发布者: admin| 查看: 165| 评论: 0|原作者: 夙玉

基本原理分析
Windows关机效果分析
使用Windows系统的用户在关机的时候，出现的界面只允许用户选择关机、注销或取消动作，而桌面上的程序都不能使用，并且屏幕呈现灰色状态。
本例将仿照这种高亮显示的效果在网页上实现.
在网页上运用这种关机效果有什么好处呢？首先，由于单击某一链接后，将用户此时不可用的操作隐藏在后台，将可用的操作放在屏幕最上层，并高亮显示，可以避免用户的误操作。其次，将信息高亮显示，也可以提醒用户应该注意的事项。
网页中实现关机效果分析
在网页中实现这种效果的原理很简单。创建两个图层，一个为遮盖层，覆盖整个页面，并且显示为灰色；另一个图层作为高亮显示的部分，在遮盖层的上方，这可通过设置图层的z-index属性来设置。当取消关机效果后，只需将这两个图层元素在页面中删除即可。
以下代码实现显示关机效果。

html" class="wordstyle">asp?typeid=119" snap_preview_added="no">Ajax LightBox Sample

需要注意的是，在IE浏览器中如果有元素隐藏起来。如以下代码可以用于隐藏页面所有的标记
}
//调用该类中的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请求
loadInf function() {
//当请求完成后调用本类中processInfo方法
var myAjax = new Ajax.Request(
this.content,
{method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
);
},
// 将返回的文本信息显示到高亮层上
processInf function(response){
//获得返回的文本数据
var result = response.responseText;
//显示到高亮层
info = "

" + result + "

";
//在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或为空，则设置为默认值。然后判断该值，并且返回相应的一段字符串信息。处理请求的getInfohtml" class="wordstyle">jsp页面代码如下：

<%@ 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
{
%>

Porsche Carrera GT

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{//否则
%>

Ferrari Testarossa

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.
<%}%>
html" class="wordstyle">aspx" snap_preview_added="spa" snap_icon_added="spa" act_suffix icon_trigger="false" text_trigger="true" parent_link_icon="false">http://blog.csdn.net/danforn/archive/2007/03/09/1525255.html" class="wordstyle">

收藏分享邀请

		自动登录	找回密码
密码			注册

用JavaScript实现仿Windows关机效果

Porsche Carrera GT

Ferrari Testarossa

最新评论

相关分类