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>

 

你可能感兴趣的:(JavaScript)