位置：首页>> 网络编程>> JavaScript>> 一个div层打开显示效果 js

一个div层打开显示效果 js

作者：popper　来源：无忧脚本　发布时间：2008-05-19 12:35:00　

标签：层,div,效果

前边看到有人发了个层打开效果，总感觉不是很理想个人认为:-)，如果那个层放到固定的容器里面估计就会出现问题的。

今天自己来写个，可以支持在嵌套的div内打开。支持 ie7 ff

发代码上来大家拍砖

<!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" /><style type="text/css"> body{} #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><script type="text/javascript">/* popper.w codeclass: XopenDivversion: 1.0date: 2008-5-19*/</script><title>Code By popper.w - asp之家</title></head><body><input type="button" value="点击打开" id="bt" /><input type="button" value="点击关闭" id="bt1" /><div id="main"><div id="test"></div></div></body></html><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>

投稿

一个div层打开显示效果 js

猜你喜欢