javascript 遮照层效果

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

* { 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; }

OK

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

* { 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; }

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+="出现代码异常!
错误编号: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提交

主要代码:


代码如下:

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