<HTML><HEAD><TITLE>隐藏/显示层</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<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: #e9e9e9;
}
.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
color: #16387C;
font: bold 12px 宋体,arial,sans-serif;
cursor:pointer;
letter-spacing: 2px;
text-align: left;
}
#tabclass1{
background-color:#e9e9e9 6px center no-repeat;
}
/*分类列表（模块一）*/
#class_cnt1{
background: #66eeff; left bottom repeat-x;
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 100px;
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 = 100; // 容器的最大高度
var anim = function(){
h += 50; // 每次递增50像素
//如果增加的高度开始超过容的最大高度
if(h >= max_h){
getObject('class_cnt1').style.height = "100px"; // 工期高度为100px(因为我们只希望容器这么高)
getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景
if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）
}
else{ // 如果增加中的容器高度没有超过100px
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>
<META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
<BODY>
<DIV class=class_title>
<H2 id=tabclass1 title=隐藏/显示信息 onclick=showClassList()>隐藏/显示层 </H2></DIV>
<DIV id=class_cnt1>
<P>一个层里的内容,在这里加入! </P></DIV></BODY></HTML>
css+js+table效果代码
需积分: 10 46 浏览量
2009-09-01
20:51:22
上传
评论
收藏 50KB RAR 举报
css+js+table效果代码.rar （11个子文件） 
1.htm 1KB fourbox.htm 5KB
ty.html 5KB
icon_close.png 2KB t.htm 2KB
css-submit-button.rar 3KB js-css-flash-pager.rar 31KB 4.html 390B five-js-accordion.rar 8KB i.htm 2KB y.htm 3KB资源评论
