带缓冲效果的展开、折叠层代码，基于javascript，其实已经有很多这样的代码了，只是由于每个人形容的不一样，所以真正需要的人却找不到，自己再美化一下还是很不错的。
程序代码:
<!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>
<title>带缓冲的伸缩隐藏层</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript">
var flag=0;
function f_s(id){
var obj=document.getElementById(id);
obj.style.display="block";
obj.style.height="1px";
var changeW=function(){
var obj_h=parseInt(obj.style.height);
if(obj_h<=350){
obj.style.height=(obj_h+Math.ceil((350-obj_h)/10))+"px";
}
else{
clearInterval(bw1);
}
}
bw1= setInterval(changeW,1);
if(flag>0){
clearInterval(bw2);
}
}
function closeW(id){
flag++;
var obj=document.getElementById(id);
var closeDiv=function(){
clearInterval(bw1);
var obj_h=parseInt(obj.style.height);
if(obj_h>1){
obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px";
}
else{
clearInterval(bw2);
obj.style.display="none";
}
}
bw2= setInterval(closeDiv,1);
//alert(flag)
}
function showDiv(){
var ele = document.getElementById("div1");
clearInterval(bw1);
clearInterval(bw2);
ele.style.display = "block";
ele.style.height = 350 + "px";
}
</script>
</head>
<body>
<div onmouseover="f_s('div1')" onmouseout="closeW('div1')" style="position:absolute;background:black;left:50px;top:30px;width:150px;height:20px;color:#FFFFFF;">
鼠标放到这里看一看？</div>
<div id="div1" style="position:absolute;background:aqua;left:50px;overflow:hidden;top:50px;width:350px;display:none;" onmouseover="showDiv()" onmouseout="closeW('div1')">这个效果还不错吧？</div>
</body>
</html>
24小时新发主题 
最近被编辑的主题 
超过24小时普通主题