渐隐div的一个特效（转）

来源：互联网发布：新加坡俊知集团编辑：程序博客网时间：2024/06/11 09:53

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* { margin:0px;

padding:0px;}

#cover{position:absolute;top:0;left:0;z-index:100;visibility:hidden;background:#666;}

.shadow{position:absolute;top:0;left:0;z-index:200;visibility:hidden;}

#a_open,a_close{cursor:hand;cursor:pointer; color:red;}

</style>

</head>

<body>

这里是内容 <a id="a_close" href="#" onClick="DecOpacity();return false;">关闭</a>

</div>

</body>

</html>

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = window.innerWidth + window.scrollMaxX;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

//console.log(self.innerWidth);

//console.log(document.documentElement.clientWidth);

if (self.innerHeight) {// all except Explorer

if(document.documentElement.clientWidth){

windowWidth = document.documentElement.clientWidth;

} else {

windowWidth = self.innerWidth;

}

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

// for small pages with total height less then height of the viewport

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

//console.log("xScroll " + xScroll)

//console.log("windowWidth " + windowWidth)

// for small pages with total width less then width of the viewport

if(xScroll < windowWidth){

pageWidth = xScroll;

} else {

pageWidth = windowWidth;

}

//console.log("pageWidth " + pageWidth)

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

return arrayPageSize;

}

var pageS=new Array();

pageS=getPageSize();

var contBox=document.getElementById("contBox");

var cover=document.getElementById("cover");

var tmpAlpha=0.0;

var tmpAlphaN=0.5;

function show(cover,id){

var objCover=document.getElementById(cover);

var objId=document.getElementById(id);

var scrollW = pageS[2];

var scrollH = pageS[3];

var T=(scrollH-objId.offsetHeight)/2+document.body.scrollTop||document.documentElement.scrollTop;

var L=(scrollW-objId.offsetWidth)/2+document.body.scrollLeft||document.documentElement.scrollLeft;

objCover.style.width = scrollW+"px";

objCover.style.height= scrollH+"px";

objCover.style.visibility="visible";

objId.style.visibility="visible";

objId.style.top=T+"px";

objId.style.left=L+"px";

AddOpacity();

}

function hide(cover,id){

var objCover=document.getElementById(cover);

var objId=document.getElementById(id);

objCover.style.visibility="hidden";

objId.style.visibility="hidden";

}

function AddOpacity(){

contBox.style.opacity=tmpAlpha;

contBox.style.filter="alpha(opacity="+tmpAlpha*100+")";

cover.style.opacity=tmpAlpha;

cover.style.filter="alpha(opacity="+tmpAlpha*60+")";

tmpAlpha+=0.05;

if(tmpAlpha>=0.5){

cover.style.opacity = 0.5;

}

if(tmpAlpha>=1){

contBox.style.opacity = 1;

return;}else{

setTimeout("AddOpacity()",20);}

}

function DecOpacity(){

contBox.style.opacity=tmpAlphaN;

contBox.style.filter="alpha(opacity="+tmpAlphaN*100+")";

cover.style.opacity=tmpAlphaN;

cover.style.filter="alpha(opacity="+tmpAlphaN*60+")";

tmpAlphaN-=0.05;

if(tmpAlphaN<=0){

contBox.style.opacity = 0;

contBox.style.visibility="hidden";

cover.style.visibility="hidden";

tmpAlpha=0.0;

tmpAlphaN=0.5;

//clearTimeout()

return;}else{

setTimeout("DecOpacity()",20);}

}

</script>