JS动画效果打开、关闭层的实现方法
本文实例讲述了JS动画效果打开、关闭层的实现方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>层展开、关闭</title>
<styletype="text/css">
#main{
width:500px;margin:100px;
height:500px;border:1pxsolidred
}
#test{
border:1pxsolidred;
display:none;width:10px;
height:10px;background:yellow
}
</style>
</head>
<body>
<inputtype="button"value="打开"id="bt"/>
<inputtype="button"value="关闭"id="bt1"/>
<divid="main"><divid="test"></div>
</div>
</body>
</html>
<scripttype="text/javascript">
function$(o){
returndocument.getElementById(o);
}
functionXslideDown(obj,type,mX,num){
if(!type){return;}
try{
vartype1=type=="height"?"marginTop":"marginLeft";
vartype2=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){}
}
functionXslideUp(obj,type,mX,num){
if(!type){return;}
try{
vartype1=type=="height"?"marginTop":"marginLeft";
vartype2=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){}
}
functionXSetCss(obj,cssArgs){
if(arguments.length==2)
{
if(cssArgs.constructor==Object){
for(varoincssArgs)
{
if(obj.style[o]!="undefiend")
{
obj.style[o]=cssArgs[o];
}
}
}
if(cssArgs.constructor==Array&&cssArgs.length==2){
obj.style[cssArgs[0]]=cssArgs[1];
}
}
}
functionXgetOffset(obj){
return{
height:obj.offsetHeight,
width:obj.offsetWidth,
top:parseInt((obj.parentNode.offsetHeight-obj.offsetHeight)/2),
left:parseInt((obj.parentNode.offsetWidth-obj.offsetWidth)/2)
}
}
functionXopenDiv(o){
o.style.display="block";
XslideDown(o,"width",400,10);
XslideDown(o,"height",400,10);
}
functionXcloseDiv(o){
XslideUp(o,"width",10,10);
XslideUp(o,"height",10,10);
}
$("bt").onclick=function(){
XopenDiv($("test"))
}
$("bt1").onclick=function(){
XcloseDiv($("test"))
}
</script>
希望本文所述对大家的javascript程序设计有所帮助。