<!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>
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
