模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
层和布局特效代码
>
收藏
分享
查看评论
层和布局
演示
DIV层的展开与折叠_层和布局特效
查看演示效果
特效Tag:
层展开
添加
CSS+JavaScript实现一个DIV层的展开与折叠,代码很实用,风格样式自己修改一下,可以控制多个DIV层。
<html> <head> <title>层的展开与折叠</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#555; padding:3px; display:block; color:#99CC00} .class1 { width:40%; background:#CCCCCC; position:relative; margin:0 auto; padding:5px;} span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;} p { text-align:left; line-height:20px; background:#555; padding:3px; margin-top:5px; color:#99CC00} #class1mrc { height:256px;overflow:hidden} </style> <script> function $(element){ return element = document.getElementById(element); } function $D(){ var d=$('class1mrc'); var h=d.offsetHeight; var maxh=300; function dmove(){ h+=50; //层展开速度 if(h>=maxh){ d.style.height='300px'; clearInterval(iIntervalId); }else{ d.style.display='block'; d.style.height=h+'px'; } } iIntervalId=setInterval(dmove,2); } function $D2(){ var d=$('class1mrc'); var h=d.offsetHeight; var maxh=300; function dmove(){ h-=50;//层收缩速度 if(h<=0){ d.style.display='none'; clearInterval(iIntervalId); }else{ d.style.height=h+'px'; } } iIntervalId=setInterval(dmove,2); } function $use(){ var d=$('class1mrc'); var sb=$('stateBut'); if(d.style.display=='none'){ $D(); sb.innerHTML='展开'; }else{ $D2(); sb.innerHTML='收缩'; } } </script> </head> <body> <div class="class1"> <h1>展开/折叠效果</h1> <span id="stateBut" onclick="$use()">展开</span> <p id="class1mrc"> 欢迎来到 <a href="/">mb5u.com</a>,我们致力于做一个学习型的源码下载站,目前包括网页特效代码,精品图片特效代码等,很多你喜欢的实用程序,希望您经常来我们这里做客。</p> </div> </body>
所属频道:
层和布局特效
/
更新时间:2012-12-06
[收藏]
[报错]
[返回列表]
相关
层和布局特效
:
表格内容排序sortTable
行变成列,列变成行
文本输入限制
拆分单元格
控制表格内的滚动条
颜色交替的表格
JS计算里面有多少个
极酷的表格
会动的表格
可拖动单元格
变色表格
访问表格的每个TD
层和布局特效Rss订阅
特效代码搜索
层和布局特效推荐
滑动展开一个层的JavaScript代码
CSS图片滑动提示,超不错
表格内容排序sortTable
纯CSS实现圆角、可拖动的一个DIV模块层
CSS垂直自适应
表格操作
CSS高度自适应代码(用了都说好)
飘出的广告窗口,可以自动关闭
始终显示在右下角的链接提示框
3D立体带阴影的CSS圆角效果
猜你也喜欢看这些
清爽配色15套
JavaScript荧光文字遮罩特效
超不错的银灰色竖排折叠菜单
CSS背景渐变,从左往右渐变
CSS给网页上的评论文本框加上提醒功能背景图片
无缝滚动
打开的窗口由左上角展开
仿WINDOW的纯JS超酷颜色选择器
Js适时切换网页背景颜色
页面背景渐变
相关链接:
复制本页链接
|
搜索DIV层的展开与折叠
特效说明:
层和布局模板
-
DIV层的展开与折叠
。