<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Expand, Close </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
#main {width:500px; margin:100px; height:500px;border:1px Solid Red}
#test {border:1px solid red;display:none;width:10px;height:10px; Background:yellow}
</style>
<body>
<input type= "button" value= "open" id= "BT"/>
<input type= "button" value= "Close" id= "Bt1"/>
<div id= "main" ><div id= "test" ></div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
<script type= "Text/javascript" >
function $ (o) {
return document.getElementById (o);
}
function Xslidedown (obj,type,mx,num) {
if (!type) {return;}
try{
var type1=type== "height"? " MarginTop ":" MarginLeft ";
var type2=type== "height"? " Top ":" Left ";
Xsetcss (Obj,[type1,xgetoffset (obj) [type2]+ "px"]);
Xsetcss (Obj,[type,xgetoffset (obj) [type]+num+ "px"]);
if (Xgetoffset (obj) [type]<mx) {
SetTimeout (function () {Xslidedown (obj,type,mx,num);},10);
}
else{
Xsetcss (OBJ,[TYPE,MX])
}
}
catch (e) {}
}
function Xslideup (obj,type,mx,num) {
if (!type) {return;}
try{
var type1=type== "height"? " MarginTop ":" MarginLeft ";
var type2=type== "height"? " Top ":" Left ";
Xsetcss (Obj,[type1,xgetoffset (obj) [type2]+ "px"]);
Xsetcss (Obj,[type,xgetoffset (obj) [type]-num+ "px"]);
if (Xgetoffset (obj) [type]>mx) {
SetTimeout (function () {xslideup (obj,type,mx,num);},1);
}
else{
Xsetcss (OBJ,[TYPE,MX])
Obj.style.display= "None";
}
}
catch (e) {}
}
function Xsetcss (Obj,cssargs) {
if (arguments.length==2)
{
if (cssargs.constructor==object) {
for (Var o in Cssargs)
{
if (obj.style[o]!= "Undefiend")
{
Obj.style[o]=cssargs[o];
}
}
}
if (cssargs.constructor==array&&cssargs.length==2) {
OBJ.STYLE[CSSARGS[0]]=CSSARGS[1];
}
}
}
function Xgetoffset (obj) {
return {
Height:obj.offsetHeight,
Width:obj.offsetWidth,
Top:parseint ((obj.parentnode.offsetheight-obj.offsetheight)/2),
Left:parseint ((obj.parentnode.offsetwidth-obj.offsetwidth)/2)
}
}
function Xopendiv (o) {
o.style.display= "Block";
Xslidedown (o, "width", 400,10);
Xslidedown (o, "height", 400,10);
}
function Xclosediv (o) {
Xslideup (o, "width", 10,10);
Xslideup (o, "height", 10,10);
}
$ ("BT"). Onclick=function () {
Xopendiv ($ ("test"))
}
$ ("bt1"). Onclick=function () {
Xclosediv ($ ("test"))
}
</script>
JS Animation Open, close the presentation code of the layer