点击显示/隐藏层，点击展开收缩隐藏层-CSS系列教程


用户名：	密码：
	飞诺网	加入收藏

飞诺网网页设计 FrontPage Dreamweaver html Javascript css 网页制作技巧网页特效色彩原理设计理念 web技术文档

CSS系列教程 CSS实例 CSS技术文档

您当前的位置：飞诺网 >> 网页设计 >> css >> CSS系列教程

点击显示/隐藏层，点击展开收缩隐藏层

www.diybl.com 时间： 2011-04-26 作者：佚名编辑：fnw 点击： [ 评论 ]

<!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=gb2312" />  
<title>隐藏/显示层</title>  
<style type="text/css">  
<!--  
body{  
background: #FFF;  
color: #000;  
font: normal 12px 宋体,arial,sans-serif;  
margin: 0;  
padding: 0;  
text-align: left;  
}  
div,form,ul,ol,li,span,p {  
border: 0;  
margin: 0;  
padding: 0;  
}  
/*清除float*/  
.clear{  
clear: both;  
font-size: 1px;  
visibility: hidden;  
}  
/*分类标题*/  
.class_title{  
margin: 0 auto;  
width: 504px;  
height: 17px;  
border: 1px solid #9EB1C0;  
padding: 1px;  
background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);  
}  
.class_title h2{  
margin: 0;  
padding: 2px 0 2px 18px;  
height: 12px;  
color: #16387C;  
font: bold 13px 宋体,arial,sans-serif;  
cursor:pointer;  
letter-spacing: 2px;  
text-align: left;  
}  
#tabclass1{  
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat;  
}  
/*分类列表（模块一）*/  
#class_cnt1{  
background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x;  
border: solid #9EB1C0;  
border-width: 0 1px 1px 1px;  
height: 287px;  
margin: 0 auto;  
text-align: left;  
width: 506px;  
display: block;  
  overflow:hidden;  
}  
#class_cnt1 p{  
   margin:0;  
   padding:3px;  
   line-height:150%;  
}  
-->  
</style>  
<script language="javascript" type="text/javascript">  
<!--  
//=======================================================  
//函数名称：getObject(objectId)  
//          参数objectId:控件的ID值  
//函数功能：获得控件的ID值  
//返 回 值：ture(获得ID值) false(获取ID失败)  
//=======================================================  
function getObject(objectId) {  
    if(document.getElementById && document.getElementById(objectId)) {  
// W3C DOM  
return document.getElementById(objectId);  
    } else if (document.all && document.all(objectId)) {  
// MSIE 4 DOM  
return document.all(objectId);  
    } else if (document.layers && document.layers[objectId]) {  
// NN 4 DOM.. note: this won’t find nested layers  
return document.layers[objectId];  
    } else {  
return false;  
    }  
}  
// 显示列表框  
function displayList(){      
      var h = getObject(’class_cnt1’).offsetHeight;  // 内容容器class_cnt1的初始高度（这时高度为：0）  
      var max_h = 287; // 容器的最大高度  
        
      var anim = function(){  
    h += 50; // 每次递增50像素  
    //如果增加的高度开始超过容的最大高度  
    if(h >= max_h){   
            getObject(’class_cnt1’).style.height = "287px"; // 工期高度为287px(因为我们只希望容器这么高)  
            getObject(’tabclass1’).style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景         
            if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）  
    }  
    else{ // 如果增加中的容器高度没有超过287px  
                getObject(’class_cnt1’).style.display="block"; // 让容器可见（这样我们才能够看到容器在增高的效果）  
                getObject(’class_cnt1’).style.height = h + "px"; // 容器高度不断的以50px递增  
    }  
    }  
     
  var tt = window.setInterval(anim,2);  // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）  
}  
// 隐藏列表框  
function hiddenList(){  
       var h = getObject(’class_cnt1’).offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：287px）  
   var anim = function(){  
     h -= 50; // 每次递减50像素  
       
     if(h <= 5){  
             getObject(’class_cnt1’).style.display="none"; // 内容容器不可见（当容器高度小于5px）  
           getObject(’tabclass1’).style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop2.gif)";   
           if(tt){window.clearInterval(tt);}  
       }  
       else{  
           getObject(’class_cnt1’).style.height = h + "px"; // // 容器高度不断的以50px递减   
       }  
   }  
       
   var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）  
}  
//=======================================================  
//函数名称：showClassList()  
//函数功能：隐藏-显示级分类列表框（class_cnt1）  
//返 回 值：无  
//=======================================================  
function showClassList(){  
   // 如果内容容器为不可见的display:none  
   if(getObject(’class_cnt1’).style.display == "none"){   
       displayList(); // 显示内容框  
   }  
   else{ // 如果内容容器为可见的display:block  
     hiddenList(); // 隐藏内容框  
 }  
}  
-->  
</script>  
</head>  
<body>  
<div class="class_title">  
 <h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>   
</div>   
<div id="class_cnt1">  
<p>  
1111111<br />  
111111111<br />  
1111111<br />  
111111111<br />  
1111111<br />  
111111111<br />  
1111111<br />  
111111111<br />  
1111111<br />  
111111111<br />  
1111111<br />  
111111111<br />  
111111111<br />  
</p>  
</div>  
</body>  
</html>