页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

仿YAHOO的一个小效果下拉效果

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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>

// 显示列表框 
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"> 
     
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    111111111
 
     
    </div> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]