仿YAHOO的一个小效果下拉效果_javascript技巧

来源：品趣旅游知识分享网

// 隐藏列表框 
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> 
 
 <h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2> 
 
 
 <p> 
 1111111
 
 111111111
 
 1111111
 
 111111111
 
 1111111
 
 111111111
 
 1111111
 
 111111111
 
 1111111
 
 111111111
 
 1111111
 
 111111111
 
 111111111
 
 </p> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]