`
itoracja
  • 浏览: 142782 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

CSS+JS实现一个DIV层的展开/折叠效果

    博客分类:
  • java
阅读更多
    <html><br><head><br><title>css+js实现一个div层的展开/折叠效果丨芯晴网页特效丨csrcode.cn</title><br><style><br>* { margin:0; padding:0;}<br>body { text-align:center; font:75% verdana, arial, helvetica, sans-serif;}<br>h1 { font:125% arial, helvetica, sans-serif; text-align:left; font-weight:bolder; background:#555;  padding:3px; display:block; color:#99cc00}<br>.class1 { width:40%; background:#cccccc; position:relative; margin:0 auto; padding:5px;}<br>span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}<br>p { text-align:left; line-height:20px; background:#555; padding:3px; margin-top:5px; color:#99cc00}<br>#class1content { height:256px;overflow:hidden}<br></style><br><script><br>function $(element){<br>return element = document.getelementbyid(element);<br>}<br>function $d(){<br>var d=$('class1content');<br>var h=d.offsetheight;<br>var maxh=300;<br>function dmove(){<br>h+=50; //层展开速度<br>if(h>=maxh){<br>d.style.height='300px';<br>clearinterval(iintervalid);<br>}else{<br>d.style.display='block';<br>d.style.height=h+'px';<br>}<br>}<br>iintervalid=setinterval(dmove,2);<br>}<br>function $d2(){<br>var d=$('class1content');<br>var h=d.offsetheight;<br>var maxh=300;<br>function dmove(){<br>h-=50;//层收缩速度<br>if(h<=0){<br>d.style.display='none';<br>clearinterval(iintervalid);<br>}else{<br>d.style.height=h+'px';<br>}<br>}<br>iintervalid=setinterval(dmove,2);<br>}<br>function $use(){<br>var d=$('class1content');<br>var sb=$('statebut');<br>if(d.style.display=='none'){<br>$d();<br>sb.innerhtml='收缩';<br>}else{<br>$d2();<br>sb.innerhtml='展开';<br>}<br>}<br></script><br></head><br><body><br><div class="class1"><br><h1>展开/折叠效果 - 芯晴网页特效</h1><br><span id="statebut" onclick="$use()">收缩</span><br><p id="class1content">当然你也可以把下面一段代码去掉,只留这一行。<br><p align="center">本特效由 <a href="http://www.csrcode.cn">芯晴网页特效</a>丨csrcode.cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</p><br></p><br></div><br></body><br>文章由 芯晴网页特效|csrcode.cn 收集(www.csrcode.cn) 详文参考:http://www.csrcode.cn/html/txdm/tcys/1317.htm
 
0
0
分享到:
评论
2 楼 linginfanta 2011-10-09  
这是代码吗,格式化一下,兄弟。谁有心情看你这一团乱麻东东。
1 楼 kudz 2011-08-24  
参考一下jquery吧

相关推荐

    CSS+JS实现一个DIV层的展开折叠效果

    本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要创建一个 HTML 结构来容纳我们的内容...

    div+css+js实现菜单的收缩与展开

    div+css+js实现菜单的收缩与展开

    JS+CSS实现DIV层的展开、收缩效果

    CSS+JS实现一个DIV层的展开/折叠效果&lt;/title&gt; &lt;style&gt; * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, ...

    精美css+div网站实例源码

    6. **JavaScript交互**: 虽然主要标签是CSS和div,但源码可能也包含了JavaScript代码,用于实现动态效果和用户交互,比如导航菜单的展开折叠、图片轮播等。 7. **Web标准和最佳实践**: 学习这些源码时,可以观察...

    DIV+CSS+JS版可展开滚动客服特效

    "DIV+CSS+JS版可展开滚动客服特效"这个标题指的是一个基于网页技术实现的客服系统,该系统运用了HTML中的`&lt;div&gt;`元素、CSS(层叠样式表)以及JavaScript(一种客户端脚本语言)来创建一个可展开、可滚动的交互式客服...

    Div+Css+js树形菜单

    本项目以“Div+Css+js树形菜单”为主题,利用HTML的Div元素、CSS样式和JavaScript脚本来实现一个功能完备、视觉效果良好的树形菜单。 首先,Div是HTML中的一个布局容器,用于组织和控制页面内容的布局。在树形菜单...

    div+css+js树形导航

    在网页设计中,"div+css+js树形导航"是一种常见的交互式菜单设计方法,它结合了HTML的结构、CSS的样式以及JavaScript的动态功能,以创建出可展开和折叠的层次化导航菜单。这种导航模式对于组织大量链接和子菜单的...

    多功能电子相册翻书页效果特效HTML+css+js代码

    标题 "多功能电子相册翻书页效果特效HTML+css+js代码" 描述了一种用于网页设计的技术,这种技术能够实现模拟真实书籍翻页效果的动态电子相册。电子相册翻页特效使得用户在浏览网页上的照片集时,能够体验到如同翻阅...

    DIV+CSS+JS树形菜单

    标题中的“DIV+CSS+JS树形菜单”指的是在网页设计中使用HTML的`&lt;div&gt;`元素、CSS样式以及JavaScript脚本来实现一种交互式的树状菜单。这种菜单通常用于网站的导航,允许用户通过展开和折叠节点来浏览多级结构的内容。...

    css+div+js侧栏

    ### CSS+DIV+JS侧栏实现详解 #### 一、概述 在网页设计与开发过程中,侧栏(Sidebar)是一种非常常见的布局元素,通常用于显示导航菜单或辅助信息。通过结合使用CSS、HTML (DIV) 和JavaScript技术,可以创建出功能...

    DIV+CSS+JS二级树型结构,主要用于网站信息说明,展开后刷新无影响

    DIV+CSS+JS二级树型菜单,展开后刷新无影响,可自定义颜色,大小等

    DIV+CSS+JS二级树型菜单,ul li展开后刷新无影响

    在本资源中,作者使用 DIV、CSS 和 JS 实现了一个二级树型菜单。菜单可以展开多个栏目,刷新后不受影响。 2. 解决背景色和背景图片分开写的bug 作者原来写的代码中,#nav li的背景色和背景图片分开写了,造成背景...

    js+css+div导航菜单

    3. ocscript.js:这是一个JavaScript文件,其中包含了实现导航菜单动态效果的代码。可能包括了事件监听器的设置、DOM操作(如添加、删除、修改元素)、以及动画效果的实现。 综上所述,这个项目涉及的知识点包括:...

    用Js和css实现树状图

    每个节点可能是一个`&lt;li&gt;`元素,通过CSS样式控制其展开和折叠。子节点可以通过`&lt;ul&gt;`元素嵌套。 再来看看`dtree.css`,这是样式表文件,它的作用是使树状图看起来更美观。CSS可以设置树状图的布局、颜色、字体等...

    jquery实现网页右侧可展开折叠的DIV特效

    标题中的“jquery实现网页右侧可展开折叠的DIV特效”指的是使用JavaScript库jQuery来创建一种交互式的网页元素,这种元素通常位于页面的右侧,可以被用户展开或折叠。这个功能常见于在线客服系统,因为它允许不干扰...

    javascript 实现的一个层展开、层折叠插件及应用实例集

    在这个"javascript 实现的一个层展开、层折叠插件及应用实例集"中,我们将会探讨如何使用JavaScript来实现页面元素(如div或ul列表)的展开与折叠功能,这对于构建可扩展的界面和优化用户体验至关重要。 首先,我们...

    折叠菜单div+CSS

    本案例中,我们探讨的是使用div和CSS技术来创建一个淡蓝色风格的折叠菜单。下面将详细介绍如何实现这样的效果。 首先,我们需要了解div元素。在HTML中,div是一个通用容器,用于组合其他HTML元素,它可以对内容进行...

    js+css3网页右侧边收缩展开导航菜单代码.zip

    今天我们将深入探讨如何利用JavaScript(简称JS)和CSS3技术实现一个可收缩展开的右侧边导航菜单。这份代码资源——"js+css3网页右侧边收缩展开导航菜单代码.zip",提供了完整的实现方案,包括HTML结构、CSS样式和...

    经典导航 CSS+DIV布局

    在网页设计领域,CSS(Cascading Style Sheets)与DIV布局是构建网页结构的重要技术,而JavaScript(JS)则是实现动态交互的关键。本主题聚焦于"经典导航"的设计,特别是利用CSS+DIV布局以及JS来创建高效、美观的...

    本人收集的近50种伸缩滑动折叠菜单(js、css、div实现)

    4. 折叠菜单设计原则:一个好的折叠菜单应该简洁、直观且易于操作。考虑以下几点: - 易用性:菜单的结构应清晰,逻辑性强,让用户能快速理解。 - 响应性:菜单应适应各种屏幕尺寸,特别是在移动设备上。 - 动画...

Global site tag (gtag.js) - Google Analytics