首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
平面设计
画册
VI欣赏
包装
CG-插画
搜索
个人网页
Alexa排名
CSS
建站资源
下载专区
JS特效
品牌服装
服装院校
专题欣赏
SEO
图标欣赏
专题
深圳网站建设
广州网站设计
域名注册
上海网站建设
虚拟主机
广州网站建设
广州网页设计
签名设计
虚拟主机
域名注册
品牌形象设计
设计联盟
当前位置：
网站综合首页
>>
网页JS特效
>>
页面特效类
>> 仿Yahoo隐藏、显示层效果
仿Yahoo隐藏、显示层效果
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
网页JS特效大全
来源：
中国设计秀
作者：
点击：
1200
加入收藏
发表评论
0
顶一下
<!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>中国设计秀Cnwebshow.com--隐藏/显示层</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> <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_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"> <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>
2007-08-21 15:18:00 出处：
本文引用地址：
http://www.cnwebshow.com/site/html/article_914.html
热点文章/相关文章
最新文章
·
JS页内查找关键词的高亮显示
·
让网页上的超链接失效，不能点击
·
javascript 改变iframe(框架)的...
·
javascript 改变框架内网页的CSS
·
一个精美强大的JS日历
·
仿Yahoo隐藏、显示层效果
·
表格以及列表隔行换色的js效果
·
向右侧滑出的信息提示栏
·
可伸展收缩的内容显示栏目
·
可选择背景色的广告牌效果
艺术设计秀最新图片
国外涂鸦风格插画...
一组绝对精美标志...
AMNEWTON21平面广...
国外BYO2平面广告...
国外获奖包装设计...
优秀房地产楼书设...
推荐文章
素材下载
矢量
潮流素材
背景素材
模板
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我，秀出精彩！
中国设计秀，秀---无处不在！！
交流群：9107036 3848215 8850631
粤ICP备05067046号
八度数据
提供带宽
![优秀房地产楼书设计欣赏[时代庄园]](/uploadfile/art/uploadfile/200807/20080703113157494.gif)
