DIV+CSS实现显示隐藏层
2012-01-03 21:40
585 查看
<!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: #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:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}
.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
color: #16387C;
font: bold 13px 宋体,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) 6px center no-repeat;
}
/*分类列表（模块一）*/
#class_cnt1{
background: url(http://www.east-dragon.cn/files/sw/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 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 = 287; // 容器的最大高度
var anim = 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递增
}
}
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>
</head>
<body>
<div class="class_title">
<h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>
</div>
<div id="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>
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: #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:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}
.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
color: #16387C;
font: bold 13px 宋体,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) 6px center no-repeat;
}
/*分类列表（模块一）*/
#class_cnt1{
background: url(http://www.east-dragon.cn/files/sw/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 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 = 287; // 容器的最大高度
var anim = 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递增
}
}
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>
</head>
<body>
<div class="class_title">
<h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>
</div>
<div id="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS+CSS简单实现DIV遮罩层显示隐藏
- css实现 ： 鼠标移动上去显示div,移开隐藏div
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- css中实现div的显示和隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- DIV+CSS实现的拖动+隐藏/显示效果+背景变暗
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- CSS实现DIV感应鼠标Hover时的显示隐藏效果
- JS+CSS简单实现DIV遮罩层显示隐藏
- CSS实现div的全屏自适应显示(两种方案)
- html + CSS实现文字超出长度隐藏,显示省略号