javascript 实现遮盖层效果 -

koudailidexiaolong

浏览: 96091 次
性别:
来自: 西安

最近访客更多访客>>

hjz

Blue丶s

doc30000

钰芯lyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript 实现遮盖层效果

<!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>

分享到：