您的位置：首页 > Web前端 > JavaScript

javascript 实现遮盖层效果

2014-04-29 18:39 323 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
//大的div对象
var coverLayer ;
//每次加载的索引
var index = 0;
//定时器对象
var times;
function show(){
//获得遮盖层的div对象
coverLayer =  document.getElementById("coverLayer");
coverLayer.style.width = document.documentElement.scrollWidth+"px";
coverLayer.style.height = document.documentElement.scrollHeight+"px";
coverLayer.style.display = "block";
//实现显示的图片或文字区域居中
var height = document.documentElement.scrollHeight/2 -50;
var width = document.documentElement.scrollWidth/2 -50;
document.getElementById("spanCover").style.position="absolute";
document.getElementById("spanCover").style.top= height+"px";
document.getElementById("spanCover").style.left= width+"px";
//设置定时器实现动画效果
window.setInterval("changeHTML()",1000);
}
//拼接显示的文字信息
function changeHTML(){
index = index +1;
var htmls = "";
var point = ".";
htmls = "正在执行请稍后";
if(index > 6){
index = 0;
htmls = htmls;
}else{
var s =""
for(var i = 0;i< index ; i++){
s = s + point
}
htmls = htmls +s;
}
document.getElementById("spanCover").innerHTML = htmls;
}
function hidden(){
//取消定时器
window.clearInterval(times);
//隐藏
coverLayer.style.display="none";
}
</script>
<style type="text/css">
#coverLayer{
background:gray;
position:absolute;
left:0px;
top:0px;
display:none;
z-index:20;
filter:alpha(opacity=50);
opacity:0.6 !important;
}
</style>
</head>
<body><input type="button" value="现实" name="dfsdsd" onclick="show()" />
<div id="coverLayer"  style="display:none;color:red;font-size:18px;" align="center" ><span id="spanCover" >正在执行请稍后</span></div>
</body>
</html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                js实现遮盖层
                                                javascript实现遮盖层
                                                页面层
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航