下拉滑动门

悠悠 2024-02-17 22:38 59阅读 0赞

<!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> 
     
    </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">

<table> 
 <tbody> 
  <tr> 
   <td>第一层信息 </td> 
  </tr> 
 </tbody> 
</table>

十三妖  
十三妖  
十三妖

<table> 
 <tbody> 
  <tr> 
   <td>第二层信息 </td> 
  </tr> 
 </tbody> 
</table>

ThirdteenDevil

<table> 
 <tbody> 
  <tr> 
   <td>第三层信息 </td> 
  </tr> 
 </tbody> 
</table>

devil13th