仿YAHOO的一个小效果!

2006-11-15 12:08:19

[code]<!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_dro&#112;1.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_dro&#112;1.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_dro&#112;2.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>[/code]