javascript 遮照层效果_javascript技巧

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } 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; } </style> <div id="wrap"> <a href="javascript:void(0)" id="ok">OK</a> </div> <div id="divId_no_click"></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"; } }; $("ok").onclick = function() { Class.bint("divId_no_click"); } window.onresize = function() { Class.res("divId_no_click","wrap"); } Class.x(10,"wrap"); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

<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> <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>
[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 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";
}
};