<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>隐藏/显示层</title>
<styletype="text/css">
<!--
body{
background:#FFF;
color:#000;
font:normal12px宋体,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:0auto;
width:504px;
height:17px;
border:1pxsolid#9EB1C0;
padding:1px;
background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}
.class_titleh2{
margin:0;
padding:2px02px18px;
height:12px;
color:#16387C;
font:bold13px宋体,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)6pxcenterno-repeat;
}
/*分类列表(模块一)*/
#class_cnt1{
background:url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif)leftbottomrepeat-x;
border:solid#9EB1C0;
border-width:01px1px1px;
height:287px;
margin:0auto;
text-align:left;
width:506px;
display:block;
overflow:hidden;
}
#class_cnt1p{
margin:0;
padding:3px;
line-height:150%;
}
-->
</style>
<scriptlanguage="javascript"type="text/javascript">
<!--
//=======================================================
//函数名称:getObject(objectId)
//参数objectId:控件的ID值
//函数功能:获得控件的ID值
//返回值:ture(获得ID值)false(获取ID失败)
//=======================================================
functiongetObject(objectId){
if(document.getElementById&&document.getElementById(objectId)){
//W3CDOM
returndocument.getElementById(objectId);
}elseif(document.all&&document.all(objectId)){
//MSIE4DOM
returndocument.all(objectId);
}elseif(document.layers&&document.layers[objectId]){
//NN4DOM..note:thiswon'tfindnestedlayers
returndocument.layers[objectId];
}else{
returnfalse;
}
}
//显示列表框
functiondisplayList(){
varh=getObject('class_cnt1').offsetHeight;//内容容器class_cnt1的初始高度(这时高度为:0)
varmax_h=287;//容器的最大高度
varanim=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递增
}
}
vartt=window.setInterval(anim,2);//设置每2毫秒循环一次(每2毫秒,运行一次anim[容器的高度递减50px])
}
//隐藏列表框
functionhiddenList(){
varh=getObject('class_cnt1').offsetHeight;//内容容器class_cnt1的初始高度(这时高度为:287px)
varanim=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递减
}
}
vartt=window.setInterval(anim,2);//设置每2毫秒循环一次(每2毫秒,运行一次anim[容器的高度递减50px])
}
//=======================================================
//函数名称:showClassList()
//函数功能:隐藏-显示级分类列表框(class_cnt1)
//返回值:无
//=======================================================
functionshowClassList(){
//如果内容容器为不可见的display:none
if(getObject('class_cnt1').style.display=="none"){
displayList();//显示内容框
}
else{//如果内容容器为可见的display:block
hiddenList();//隐藏内容框
}
}
-->
</script>
</head>
<body>
<divclass="class_title">
<h2id="tabclass1"οnclick="showClassList()"title="隐藏/显示信息">分类信息</h2>
</div>
<divid="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>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>隐藏/显示层</title>
<styletype="text/css">
<!--
body{
background:#FFF;
color:#000;
font:normal12px宋体,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:0auto;
width:504px;
height:17px;
border:1pxsolid#9EB1C0;
padding:1px;
background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}
.class_titleh2{
margin:0;
padding:2px02px18px;
height:12px;
color:#16387C;
font:bold13px宋体,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)6pxcenterno-repeat;
}
/*分类列表(模块一)*/
#class_cnt1{
background:url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif)leftbottomrepeat-x;
border:solid#9EB1C0;
border-width:01px1px1px;
height:287px;
margin:0auto;
text-align:left;
width:506px;
display:block;
overflow:hidden;
}
#class_cnt1p{
margin:0;
padding:3px;
line-height:150%;
}
-->
</style>
<scriptlanguage="javascript"type="text/javascript">
<!--
//=======================================================
//函数名称:getObject(objectId)
//参数objectId:控件的ID值
//函数功能:获得控件的ID值
//返回值:ture(获得ID值)false(获取ID失败)
//=======================================================
functiongetObject(objectId){
if(document.getElementById&&document.getElementById(objectId)){
//W3CDOM
returndocument.getElementById(objectId);
}elseif(document.all&&document.all(objectId)){
//MSIE4DOM
returndocument.all(objectId);
}elseif(document.layers&&document.layers[objectId]){
//NN4DOM..note:thiswon'tfindnestedlayers
returndocument.layers[objectId];
}else{
returnfalse;
}
}
//显示列表框
functiondisplayList(){
varh=getObject('class_cnt1').offsetHeight;//内容容器class_cnt1的初始高度(这时高度为:0)
varmax_h=287;//容器的最大高度
varanim=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递增
}
}
vartt=window.setInterval(anim,2);//设置每2毫秒循环一次(每2毫秒,运行一次anim[容器的高度递减50px])
}
//隐藏列表框
functionhiddenList(){
varh=getObject('class_cnt1').offsetHeight;//内容容器class_cnt1的初始高度(这时高度为:287px)
varanim=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递减
}
}
vartt=window.setInterval(anim,2);//设置每2毫秒循环一次(每2毫秒,运行一次anim[容器的高度递减50px])
}
//=======================================================
//函数名称:showClassList()
//函数功能:隐藏-显示级分类列表框(class_cnt1)
//返回值:无
//=======================================================
functionshowClassList(){
//如果内容容器为不可见的display:none
if(getObject('class_cnt1').style.display=="none"){
displayList();//显示内容框
}
else{//如果内容容器为可见的display:block
hiddenList();//隐藏内容框
}
}
-->
</script>
</head>
<body>
<divclass="class_title">
<h2id="tabclass1"οnclick="showClassList()"title="隐藏/显示信息">分类信息</h2>
</div>
<divid="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>