<!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: #FFFFFF;
color: #000000;
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;
}
/*链接样式*/
a:link{
color: #000000;
text-decoration: none;
}
a:visited{
color: #000000;
text-decoration: none;
}
a:hover{
color: #16387C;
text-decoration: underline;
}
/*清除float*/
.clear{
clear: both;
font-size: 1px;
visibility: hidden;
}
/*分类标题*/
.class_title{
border: 1px solid #9EB1C0;
height: 17px;
margin: 0 auto;
padding: 1px !important;
width: 504px;
}
.class_tltcnt{
background: url(../images/title_bg.gif);
height: 17px;
margin: 0 auto;
width: 504px;
}
.class_tltcnt #tab_drop1{
float: left;
font-size: 1px;
height: 12px;
margin: 0;
padding: 5px 0 4px 5px !important;
padding: 5px 0 2px 3px;
text-align: center;
width: 11px;
}
.class_tltcnt h2{
color: #16387C;
float: left;
font: bold 13px 宋体,arial,sans-serif;
height: 12px;
letter-spacing: 2px;
margin: 0;
padding: 2px 0 0 4px;
padding: 2px 0 2px 6px !important;
text-align: left;
width: 200px;
}
/*分类列表(模块一)*/
#class_cnt1{
background: url(../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 .class1{
float: left;
margin: 0;
padding: 0;
text-align: left;
width: 116px;
}
#class_cnt1 .class1 .clstitle1{
color: #F0741A;
font: bold 12px 宋体,sans-serif;
height: 12px;
letter-spacing: 2px;
margin: 0 auto;
padding: 8px 0 4px 0 !important;
padding: 8px 0 4px 16px;
text-align: left;
width: 102px;
}
#class_cnt1 .class1 li{
; width: 106px;
float: left;
font: normal 12px 宋体,arial,sans-serif;
height: 13px;
list-style-type: none;
padding: 5px 0 0 10px !important;
padding: 4px 0 0 20px;
text-align: left;
}
-->
</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;
}
}
//=======================================================
//函数名称:showClassList1()
//函数功能:隐藏-显示1级分类列表框(class_cnt1)
//返 回 值:无
//=======================================================
function showClassList1(){
if (getObject('class_cnt1').style.display == "none") {
var h = getObject('class_cnt1').offsetHeight;
var max_h = 287;
var anim = function(){
h += 30;
if(h >= max_h){
getObject('class_cnt1').style.height = "287px";
getObject('tabclass1').src="http://www.east-dragon.cn/files/sw/images/tab_drop1.gif";
if(tt){window.clearInterval(tt);}
}
else
{
getObject('class_cnt1').style.display="block";
getObject('class_cnt1').style.height = h + "px";
}
}
var tt = window.setInterval(anim,2);
}
else
{
var h = getObject('class_cnt1').offsetHeight;
var anim = function(){
h -= 30;
if(h <= 5){
getObject('class_cnt1').style.height="5px";
getObject('class_cnt1').style.display="none";
getObject('tabclass1').src="http://www.east-dragon.cn/files/sw/images/tab_drop2.gif";
if(tt){window.clearInterval(tt);}
}
else{
getObject('class_cnt1').style.height = h + "px";
}
}
var tt = window.setInterval(anim,2);
}
}
-->
</script>
</head>
<body>
<div class="class_title">
<div class="class_tltcnt">
<div id="tab_drop1"><a href="javascript:void(0)" onclick="showClassList1()"><img src="http://www.east-dragon.cn/files/sw/images/tab_drop1.gif" alt="点击隐藏/显示本栏目内容" id="tabclass1" border="0" width="7" height="5" /></a></div>
<h2>分类信息</h2>
</div>
<div class="clear"></div>
</div>
<div id="class_cnt1">
<div class="class1">
<div class="clstitle1">房产信息</div>
<ul>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
</ul><div class="clear"></div>
</div>
<div class="class1">
<div class="clstitle1">房产信息</div>
<ul>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
</ul><div class="clear"></div>
</div>
<div class="class1">
<div class="clstitle1">房产信息</div>
<ul>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
</ul><div class="clear"></div>
</div>
<div class="class1">
<div class="clstitle1">房产信息</div>
<ul>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
<li><a href="#">房产信息</a>(478)</li>
<li><a href="#">房产信息</a>(1123)</li>
</ul><div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<p> </p>
<div style="margin:0 auto; border:1px solid #000; height:25px; width:506px;">
</div>
</body>
</html>
CODE:
/*分类列表(模块一)*/
#class_cnt1{
background: url(../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; /*这里是要值得注意的*/
}
加了overflow:hidden后,的效果是什么呢?
大家也许知道,overflow:hidden的效果就是当容器的内容超过容器的规定尺寸,就是width和height的部分,隐藏起来,而我们这里的效果是定时改变高度.当高度改变了,而原来的内容肯定比改变后的高度大,所以就需要把包含的内容隐藏起来.
posted on 2006-09-29 09:53
汪杰 阅读(376)
评论(0) 编辑 收藏 引用