仿YAHOO的一个小效果

<!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:

[Copy to clipboard]

/*分类列表（模块一）*/
#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 汪杰阅读(372) 评论(0) 编辑收藏引用

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

积分与排名

最新随笔

最新评论

阅读排行榜

评论排行榜