下拉滑动门

来源：互联网发布：mac系统镜像文件下载编辑：程序博客网时间：2024/04/30 14:29

 <!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> <title> 下拉滚动门 </title> <style type="text/css"> body{ margin:10px; padding:10px; } body,td,div,span,li{ font-size:12px; } .title01,.title02{ color:#fff; font-weight:bold; } #DoorP{ border:12px solid #eee; width:150px; height:300px; padding:4px; background:#fff; } .title01{ width:100%; height:25px; background:#00ccff; cursor:pointer; } .title02{ width:100%; height:25px; background:#99cc00; cursor:pointer; } .content{ background:#eee; border-bottom:2px solid #fff; overflow:hidden; color:#666; padding-left:4px; padding-right:4px; line-height:18px; } </style> <!-- 棕：#eee; 蓝：#00ccff; 绿：#99cc00; --> </head> <body> <div id="DoorP"> <table> <tr> <td> 第一层信息 </td> </tr> </table> <div class="content"> 十三妖<br/> 十三妖<br/> 十三妖<br/> </div> <table> <tr> <td> 第二层信息 </td> </tr> </table> <div class="content"> ThirdteenDevil </div> <table> <tr> <td> 第三层信息 </td> </tr> </table> <div class="content"> devil13th </div> </div> <script type="text/javascript"> var open = 2;// 设置初始打开的层序号 var openState = new Array(); var closeState = new Array(); var dH = 220; function $(id){ if(document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!"); } } function $tag(id,tagName){ return $(id).getElementsByTagName(tagName) } function closeMe(Cid,Oid){ var h = parseInt(Ds[Cid].style.height); //alert(h); if(h > 0) { h = h - Math.ceil(h/3); Ds[Cid].style.height = h+"px"; } else { openMe(Oid); clearTimeout(closeState[Cid]); return false; } closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); } function openMe(Oid){ var h = parseInt(Ds[Oid].style.height); //alert(h); if(h < dH) { h = h + Math.ceil((dH-h)/3); Ds[Oid].style.height = h+"px"; } else { clearTimeout(openState[Oid]); return false; } openState[Oid] = setTimeout("openMe("+Oid+")"); } var Ds = $tag("DoorP","div"); var Ts = $tag("DoorP","table"); if(Ds.length != Ts.length) { alert("标题和内容数目不相同!"); } for(var i = 0 ; i < Ds.length ; i++) { if(i==open) { Ds[i].style.height = dH+"px"; Ts[i].className="title01"; } else { Ds[i].style.height = "0px"; Ts[i].className="title02"; } Ts[i].value = i; Ts[i].onclick = function(){ if(open==this.value) { return false; } Ts[open].className="title02"; Ts[this.value].className="title01"; for(var i = 0 ; i < openState.length ; i++) { clearTimeout(openState[i]); clearTimeout(closeState[i]); } closeMe(open,this.value); //openMe(this.value); open = this.value; } } //直接打开层函数 function showDiv(id){ Ds[id].style.height=dH+"px"; Ds[open].style.height="0px"; open = id; } //渐渐打开层函数 </script> </body> </html>

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

第一层信息

十三妖
十三妖
十三妖

第二层信息

ThirdteenDevil

第三层信息

devil13th