http://www.cnblogs.com/cloudgamer/archive/2010/07/29/SlideView.html
<html>
<head>
<title>用户信息录入页面</title>
<script type="text/javascript">
var mh = 30;//最小高度
var step = 1;//每次变化的px量
var ms = 10;//每隔多久循环一次
function toggle(o){
if (!o.tid)o.tid = "_" + Math.random() * 100;
if (!window.toggler)window.toggler = {};
if (!window.toggler[o.tid]){
window.toggler[o.tid]={
obj:o,
maxHeight:o.offsetHeight,
minHeight:mh,
timer:null,
action:1
};
}
o.style.height = o.offsetHeight + "px";
if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action *= -1;
window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
var t = window.toggler[id];
var o = window.toggler[id].obj;
if (t.action < 0){
if (o.offsetHeight <= t.minHeight){
clearTimeout(t.timer);
return;
}
}
else{
if (o.offsetHeight >= t.maxHeight){
clearTimeout(t.timer);
return;
}
}
o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}
</script><style type="text/css">
div.xx{border:solid 1px;overflow:hidden;}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</body>
</html>
分享到：
相关推荐
标题中的“javascript层收缩效果”指的是使用JavaScript实现的网页元素（通常称为“层”或“div”）在用户交互下进行尺寸变化的效果。这种效果常见于菜单、侧边栏、弹窗等，使得页面布局更加动态和交互友好。在网页...
标题中的“滑动层收缩效果”指的是在网页设计或移动应用开发中常见的一种交互效果，通常用于导航菜单、侧边栏或任何可扩展和收缩的内容区域。这种效果允许用户通过滑动或点击来展开和收起内容，提高用户体验并节省...
在JavaScript（JS）中实现类似雅虎首页的局部收缩效果是一项常见的前端开发任务，它可以提升网页的用户体验，尤其是在有限的空间内展示更多的信息。雅虎首页的收缩效果通常指的是当用户鼠标悬停在某个模块上时，该...
`console.groupEnd`用于关闭当前折叠组，使得展开和收缩效果得以实现。 在实际应用中，我们可能还需要考虑如何将这些操作绑定到DOM元素上，比如点击事件。可以为每个层级添加一个展开/收缩按钮，然后根据当前路径来...
在网页开发中，动态效果的实现往往能提升用户体验，其中，JS+CSS实现的DIV层的展开和收缩效果就是一个常见的交互设计。这种效果允许用户通过点击按钮或链接来隐藏或显示指定的内容区域，使页面布局更加灵活且富有...
点击当前层展开并收缩已展开层效果 点击当前层展开并收缩已展开层效果
在JavaScript中，实现一个div层缓慢收缩与展开的效果通常涉及到DOM操作、事件处理以及定时器的使用。这个实例中，我们看到的是一个简单的JavaScript代码，它通过监听用户的点击事件来改变div元素的高度，从而实现层...
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式，用户可以点击按钮来展开或折叠内容。 HTML 结构 首先，我们需要...
本文将深入探讨“带缓冲的收缩与展开内容效果”这一JS特效，这是网页动态展示的重要组成部分，常见于文章预览、菜单折叠等场景。 缓冲效果，又称平滑过渡或动画效果，是指在页面元素状态改变时，不立即完成而是以一...
总结起来，"CSS3 3D层叠菜单展开收缩动画特效"是一种巧妙地结合了CSS3 3D变换、过渡效果、JavaScript交互的创新设计，它为网页增加了丰富的视觉层次和互动性。通过理解和掌握这些技术，开发者能够创造出更多引人入胜...
在网页设计中，CSS（Cascading Style Sheets）和JavaScript（JS）经常被用来实现丰富的交互效果，其中层的折叠和展开特效就是一种常见的应用场景。这些特效主要用于优化用户体验，通过控制内容的可见性，使用户可以...
本资源“垂直多级导航菜单展开收缩效果”提供了一种实现这一功能的方法，它主要涉及到JavaScript（JS）编程和前端网页开发的知识点。 1. **JavaScript基础**：JavaScript是一种广泛用于网页和应用程序的脚本语言，...
总的来说，"asp无限级分类加js收缩伸展功能代码"是一个结合了后端ASP处理无限级分类逻辑和前端JavaScript实现动态展示的技术方案。通过这种方式，可以创建一个可扩展性强、用户交互性好的分类系统。在开发过程中，...
在本文中，我们将通过jQuery中的toggle方法和animate方法来实现网页层的展开与收缩效果。 首先，需要了解toggle方法。在jQuery中，toggle方法可以切换匹配元素的可见状态。如果元素是可见的，那么执行toggle方法会...
"基于jQuery收缩与放大图片效果"是一个常见且实用的技术，它能够使用户在不离开当前页面的情况下，轻松查看图片的细节。这个技术结合了JavaScript (js) 和CSS (层叠样式表) 的力量，利用jQuery这一强大的JavaScript...
在这个项目中，CSS3可能被用来设计和控制菜单的收缩和展开效果，通过媒体查询实现响应式布局，以适应不同设备的屏幕尺寸。同时，CSS3的动画功能可能被用于创建宇航员或者其他元素的动态效果，增加视觉吸引力。 左侧...
标题中的“一个可以收缩的层特效”指的是在网页设计中实现的一种交互效果，它允许用户通过点击或触发某个事件来展开或收起特定的内容层。这种特效常见于导航菜单、侧边栏、折叠面板等元素中，提高了网页的用户体验和...
在提供的文件名中，如“用js收缩模块”、“JS展开收缩层效果软件”，这些都涉及到JavaScript与CSS结合的应用。JavaScript可以监听用户的点击事件，然后动态地改变CSS样式，实现更灵活的收缩和展开行为。 5. **...
这里我们使用了`.animate()`方法来添加平滑的动画效果，同时通过`addClass()`和`removeClass()`来切换悬浮菜单的展开和收缩状态。`expanded`是一个自定义CSS类，用于添加额外的样式，例如边框、过渡效果等。 在实际...