开发学院网页设计 JavaScript 实现“Please wait...”效果阅读

实现“Please wait...”效果

　2012-05-16 17:16:06　来源：WEB开发网　　　

核心提示： 实现该效果可大致分为两步：一、让“please wait...”图片始终显示在屏幕中央；二、设置mask层，将“please wait...”图片下的页面进行遮罩住，实现“Please wait...”效果，一、让“please wait...”

实现该效果可大致分为两步：一、让“please wait...”图片始终显示在屏幕中央；二、设置mask层，将“please wait...”图片下的页面进行遮罩住。
一、让“please wait...”图片始终显示屏幕中央

//让指定的DIV始终显示在屏幕正中间  
    function letDivCenter(divName){   
        var top = ($(window).height() - $(divName).height())/2;   
        var left = ($(window).width() - $(divName).width())/2;   
        var scrollTop = $(document).scrollTop();   
        var scrollLeft = $(document).scrollLeft();   
        $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();  
    }

二、设置mask层

<style type="text/css">  
#LockWindows{  
     position:absolute; top:10px; left:10px; background-color:#777777; z-index:2; display:none;  
     /* Moz Family使用私有属性-moz-opacity: 0.70 */ 
     /* IE 使用私有属性filter */ 
     /* 标准属性opacity支持CSS3的浏览器（FF 1.5也支持）*/ 
     opacity: 0.70;  
     filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=100);  
     width:expression(documentElement.clientWidth < 900?(documentElement.clientWidth==0?(body.clientWidth<900?'900':'auto'):'900px'):'auto');  
}  
#WindowDIV{position:absolute; z-index:3; background-color:#FFFFFF; border:#000000 solid 1px; display:none;}  
</style>

<script type="text/javascript"> 
//隐藏下拉框，以解决下拉框优先度太高的问题，    
function _displaySelect(){  
     var selects=document.getElementsByTagName("select");//整个页面的所有下拉框  
     var objWindow =   $("WindowDIV");  
     var DIVselects = objWindow.getElementsByTagName("select");//整个弹出层的所有下拉框  
     for(var i=0;i<selects.length;i++){  
         if(selects[i].style.visibility){  
             selects[i].style.visibility="";  
         }else{  
             selects[i].style.visibility="hidden";  
             for(var j=0; i<DIVselects.length; j++){  
                 DIVselects[j].style.visibility="";  
             }  
         }  
     }  
}  
function openWindows(width,height){   
     var objWindow =   $("WindowDIV");  
     var objLock =   $("LockWindows");//这个是用于在IE下屏蔽内容用  
     objLock.style.display="block";  
     objLock.style.width=document.body.clientWidth+"px";  
     objLock.style.height=document.body.clientHeight+"px";  
     objLock.style.minWidth=document.body.clientWidth+"px";  
     objLock.style.minHeight=document.body.clientHeight+"px";  
// 判断输入的宽度和高度是否大于当前浏览器的宽度和高度  
     if(width>document.body.clientWidth) width = document.body.clientWidth+"px";  
     if(height>document.body.clientHeight) height = document.body.clientHeight+"px";  
     objWindow.style.display='block';  
     objWindow.style.width = width+"px";  
     objWindow.style.height = height+"px";  
// 将弹出层居中  
     objWindow.style.left=(document.body.offsetWidth-width)/2+"px";  
     objWindow.style.top=(document.body.offsetHeight-height)/2+"px";  
     _displaySelect();  
}  
function hiddenWindows(){  
     $("LockWindows").style.display='none';  
     $("WindowDIV").style.display='none';  
     _displaySelect();  
}  
</script> 
   
<div id="LockWindows"> </div> 
<div id="WindowDIV">       
     <%@ include file="../examination/openEditerDiv.jsp"%> 
</div>