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

来源：动视网责编：小采时间：2020-11-27 20:33:38

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

仿YAHOO的一个小效果下拉效果_javascript技巧: 隐藏/显示层 = max_h){ getObject('class_cnt1').style.height = 287px; // 工期高度为287px(因为我们只希望容器这么高) getObject('tabclass1').style.backgroundImage=url(http://www.east-d

推荐度：

点击下载本文 文档为doc格式

导读仿YAHOO的一个小效果下拉效果_javascript技巧: 隐藏/显示层 = max_h){ getObject('class_cnt1').style.height = 287px; // 工期高度为287px(因为我们只希望容器这么高) getObject('tabclass1').style.backgroundImage=url(http://www.east-d

= 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> 
 
 <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需刷新才能执行]

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

推荐度：

点击下载本文 文档为doc格式

标签：的小 js 下拉

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐