<html>
<head>
<title>JS控制DIV层的展开与折叠代码 - www.webdm.cn</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}
#class1content { height:256px;overflow:hidden}
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(){
var d=$('class1content');
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=$('class1content');
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=$('class1content');
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="class1content"> 欢迎来到
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！希望您经常来我们这里做客。</p>
</div>
</body>
分享到：
相关推荐
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式，用户可以点击按钮来展开或折叠内容。 HTML 结构 首先，我们需要...
根据给定的信息，本文将详细解释与“DIV折叠展开”相关的知识内容，包括HTML结构、JavaScript函数实现原理以及具体的代码示例。 ### DIV折叠展开基础知识 #### 1. HTML 结构设计 在网页开发中，经常需要实现某些...
在JavaScript中，实现一个div层缓慢收缩与展开的效果通常涉及到DOM操作、事件处理以及定时器的使用。这个实例中，我们看到的是一个简单的JavaScript代码，它通过监听用户的点击事件来改变div元素的高度，从而实现层...
在前端开发中，手风琴菜单是一种常见的交互设计元素，它允许用户通过点击来展开或折叠各个层次的菜单项，以此实现内容的分级显示。基于Prototype的实现则意味着该代码库利用了Prototype JavaScript框架的功能来构建...
总的来说，理解并实现"Prototype 手风琴实例 展开折叠的DIV层"需要对Prototype库有一定了解，掌握基本的DOM操作，事件处理以及CSS样式控制。通过学习这个实例，开发者可以进一步提升在前端交互设计上的能力，为用户...
6. 实用性和应用场景：掌握这种用JavaScript操作CSS属性实现Div层展开关闭效果的方法，在Web开发中有广泛的应用，比如可以用于制作弹出窗口、折叠菜单、在线帮助文档、模态窗口等。这种方法非常灵活，可以根据实际...
在这个"javascript 实现的一个层展开、层折叠插件及应用实例集"中，我们将会探讨如何使用JavaScript来实现页面元素（如div或ul列表）的展开与折叠功能，这对于构建可扩展的界面和优化用户体验至关重要。 首先，我们...
在这个特定的案例中，我们关注的是"点击DIV展开JS+DIV网页特效"，这涉及到JavaScript与HTML中的<div>元素结合使用，以创建动态的交互效果。 首先，<div>是HTML中的一个区块级元素，用于组织页面内容。通过CSS，我们...
一个简单的可折叠DIV块可以由一个`<div>`元素和一个触发折叠/展开行为的按钮组成。例如： ```html <div id="collapsibleDiv"> 这是折叠的内容。 </div> 点击展开/折叠 ``` 接下来，我们用CSS来设置样式，通常包括...
**jQuery展开折叠时间轴代码详解** 在Web开发中，时间轴是一种有效的展示信息序列和事件流的方式。Tarek Anandan的timeliner.js是一个基于jQuery的插件，专门用于创建具有吸引力的竖直线性时间轴特效。这个插件不仅...
在网页设计和开发中，创建交互式的展开与关闭层按钮是一种常见的需求，它可以提升用户体验，使得用户能够方便地隐藏或显示信息。本文将详细介绍三种JavaScript实现的展开关闭层按钮效果，帮助开发者理解并运用到实际...
本资源"jquery分类展开折叠代码.zip"提供的是一种使用jQuery实现的分类展示效果，允许用户通过点击“查看更多”来展开或折叠分类内容。这种功能常见于网站的导航菜单、文章列表或产品目录，可以有效地节省页面空间，...
最后，对于"texiao5778_1560680877"这个文件名，可能是某种资源文件，如JavaScript库、CSS样式表或其他与实现点击展开功能相关的资源。如果该文件包含了具体实现的代码，需要查看具体内容才能进行更深入的分析和讲解...
本主题将深入探讨如何使用jQuery库来实现`div`元素的展开和收缩效果，这种效果通常用于隐藏和显示详细信息，提高用户体验。jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果等任务。 首先，我们...
在博文中，可能详细讲解了如何利用JavaScript、CSS和HTML实现div的折叠与展开。首先，HTML结构通常会包含一个可点击的触发器（如按钮或链接）和一个隐藏的div，后者包含折叠内容。触发器通过添加或移除特定的CSS类来...
在网页开发中，"内容块展开折叠组件"是一种常见的交互设计模式，用于优化用户界面，尤其是在展示大量信息时。这种组件允许用户根据需要隐藏或显示详细内容，提高页面的可读性和导航效率。本篇文章将深入探讨这个组件...
`moo.fx.js`则是MooTools的核心动画模块，用于实现div展开和折叠时的平滑过渡效果。 实现div动态下拉展开与合并的关键在于JS事件监听和DOM操作。开发者需要监听用户的点击事件，然后根据事件来改变div的CSS属性，如...
3. **JavaScript处理**：编写JavaScript代码来处理节点的展开和折叠。首先，我们需要获取到所有节点并为其绑定点击事件。点击时，通过切换`toggle-icon`的图片源来改变图标状态，同时，根据当前节点是否有子节点（即...
《jQuery实现网页右侧可展开折叠的DIV特效》 在网页设计与开发中，交互性和用户体验是至关重要的元素。jQuery作为一种轻量级的JavaScript库，因其简单易用且功能强大的特性，被广泛应用于网页动态效果的实现。本...