遮照层效果

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

<!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=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>
</head>
<body>
<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);
}

};
$("ok").onclick = function() {
	
  Class.bint("divId_no_click");
}
window.onresize = function() {
  Class.res("divId_no_click","wrap");
}
Class.x(10,"wrap");
      </script>
</body>
</html>

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

<!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=utf-8" />
<meta name="author" content="Stri" />
<link rel="start" href="http://www.14pc.com" title="Home" />
<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;

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){

}
</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);
}

};
$("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>

主要代码:

copycode:

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

};

代码全自己一个弄的.如有错误请大家指正.谢谢!

posted on 2009-09-16 15:00 stri 阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

木小乐

遮照层效果

copycode:

导航

公告