javascript 遮照层效果

更新时间：2009年09月17日 01:12:45 作者：

遮照层效果实现代码。

想了想,还是发出来吧.虽然面向对象还不是很明白.

还可以把上篇文章的弹出层居中效果的制作和本例一起加个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title></title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:999999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } html { height:100%; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; height:100%; line-height:26px; } #wrap { width:960px; margin:0 auto; height:auto; } #divId_no_click { position:absolute; display:none; top:0; left:0; width: 100%; height:100%; background-color: #555; z-index: 9999; filter: alpha(opacity=10); opacity:0.3; } #aa { position:fixed; bottom:20px; right:10px; } </style> <script language="javascript" type="text/javascript"> var drg=true; var ns=(document.all) ? false : true; function divcenter() {remove(); var c=document.createElement("div"); document.body.appendChild(c); c.setAttribute("id","a");         c.setAttribute("dragable","dragable");         c.onmousedown=foo;     var divId=document.getElementById("a");      divId.innerHTML+="出现代码异常!<br>错误编号:0015;";     //divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px"; //setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100); h_w(300,80); } //移除 function remove(){     if(document.getElementById("a"))     {document.body.removeChild(document.getElementById("a"));         }}          function foo(){     if(drg){         if(document.getElementById("a")!=null)         {             obj=document.getElementById("a");             document.onmousedown=m_d;             document.onmouseup=m_u;             }         }         else         {                   document.onmousemove=no_f;          document.onmousedown=no_f;          document.onmouseup=no_f;          } } function m_d(e){      document.onmousemove=m_m;      x=(ns)?e.pageX:event.x;      y=(ns)?e.pageY:event.y;      cx=obj.offsetLeft-x;      cy=obj.offsetTop-y;           } function m_m(e){           drg=false;      x=(ns)?e.pageX:event.x;      y=(ns)?e.pageY:event.y;      obj.style.left=(cx+x)+"px";      obj.style.top=(cy+y)+"px";          } function m_u(){     drg=true;     document.onmousedown=no_f;     document.onmousemove=no_f;     document.onmouseup=no_f;     } function no_f(){     return false;}          function h_w(a,b){     divId=document.getElementById("a");     divId.style.width="0px";     divId.style.height="0px";     var s=function(){         var w=parseInt(divId.style.width);         if(w<a){             divId.style.width=w+Math.ceil((a-w)/20)+"px";             divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px";}             else             {clearInterval(st); divId.style.width=a+"px";}                          }     var t=function(){         var h=parseInt(divId.style.height);         if(h<b){             divId.style.height=h+Math.ceil((b-h)/10)+"px";         divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-10+"px";}             else             {clearInterval(tt); divId.style.height=b+"px";}                          }                  var st = window.setInterval(s,1);         var tt=window.setInterval(t,1);      } </script> </head> <body> <div id="divId_no_click"></div> <div id="wrap"><a href="javascript:void(0);" id="aa">提交</a></div> <script type="text/javascript"> function $(id) { return document.getElementById(id); } var Class = { min_w:960, bint: function(r) { $(r).style.display = "block"; $(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px";     $(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; }, x: function(r,d) { for (i = 1; i < r; i++) { var c = document.createElement("div"); c.innerHTML = i; $(d).appendChild(c); } }, res: function(r,wr) { $(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px";      $(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; } }; $("aa").onclick = function() {     divcenter(); Class.bint("divId_no_click"); } window.onresize = function() { Class.res("divId_no_click","wrap"); } Class.x(100,"wrap"); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

主要代码:

复制代码代码如下:

var Class = { 
min_w:960, 
bint: function(r) { 
$(r).style.display = "block"; 
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
}, 
x: function(r,d) { 
for (i = 1; i < r; i++) { 
var c = document.createElement("div"); 
c.innerHTML = i; 
$(d).appendChild(c); 
} 
}, 
res: function(r,wr) { 
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
} 
};

JavaScript Typescript基础使用教程
TypeScript是Microsoft（微软）开发的一种开源编程语言，它充分利用了JavaScript原有的对象模型，并在此基础上进行了扩充，TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何一种JS运行环境中
2022-12-12
深入理解JavaScript函数参数(推荐)
这篇文章主要介绍了深入理解JavaScript函数参数(推荐)的相关资料,需要的朋友可以参考下
2016-07-07
js原生实现移动端手指滑动轮播图效果的示例
下面小编就为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
bootstrap datetimepicker日期插件超详细使用方法介绍
本篇文章主要介绍了bootstrap datetimepicker日期插件超详细使用方法介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JS实现图片懒加载(lazyload)过程详解
这篇文章主要介绍了JS实现图片懒加载(lazyload)过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
js检查是否全是中文
判断是否全是中文的脚本
2008-09-09
echarts学习之如何给饼图中间添加文字
这篇文章主要介绍了echarts学习之如何给饼图中间添加文字问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
这篇文章主要介绍了情人节单身的我是如何在敲完代码之后收到12束玫瑰的，感兴趣的朋友一起来学习下
2015-08-08
JS中substring与substr的用法
这篇文章主要介绍了JS中substring与substr的用法讲解，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-11-11
javascript中bind函数的作用实例介绍
bind()的方法在ie,6,7,8中不适用，需要扩展通过扩展Function prototype可以实现此方法，下面为大家介绍下javascript中bind函数的作用
2014-09-09

javascript 遮照层效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具