<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>层展开/关闭 - 运动缓冲效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="小秦,展开,关闭,运动缓冲,效果,javascript,封装" />
<meta name="description" content="展开/关闭 - 运动缓冲效果" />
<meta name="copyright" content="Copyright 2008 XQin.cn" />
<meta name="author" content="小秦" />
<script type="text/javascript">
/*
函数名称: Scroll
Scroll(obj, h, s)
参数说明:
obj,[object] id值或对象. 必需
h,[height] 展开后的高度. 可选(默认为200px)
s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
函数返回值:
true 展开(对象的高度等于展开后的高度)
false 关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
if(obj == undefined){return false;}
var h = h || 500;
var s = s || 1.12;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "hidden";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}else{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
if(status){
if(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}else{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}else{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
var IntervalId = window.setInterval(reSet,10);
return status;
}
window.onload= function(){
document.getElementById('detail').onclick = function(){
Scroll('detail', 300, 1.3);
}
document.getElementById('text').onclick = function(){
Scroll('text');
}
}
</script>
</head>
<body>
<p id="detail" style="border:1px dashed #f00;">这是一个段落啦!!哇哈哈哈<br/>点我一下下啦:)</p>
<div id="text" style="border:1px solid #0f0">Hello World!<br/>你敢点我不 -_|||</div>
<button onclick="Scroll('text', 400, 1.2)">Hello World</button>
</body>
</html>
分享到:
相关推荐
这篇博文“JS实现菜单收缩”探讨了如何利用JavaScript来动态控制网页中的菜单栏状态,使其能够在点击时展开或收起。 首先,我们需要理解JavaScript的基本语法和DOM操作。DOM(Document Object Model)是HTML和XML...
在JavaScript(JS)中实现类似雅虎首页的局部收缩效果是一项常见的前端开发任务,它可以提升网页的用户体验,尤其是在有限的空间内展示更多的信息。雅虎首页的收缩效果通常指的是当用户鼠标悬停在某个模块上时,该...
在JavaScript可视化库ECharts中,树图是一种常用于展示层次结构数据的图表类型。本教程将详细介绍如何在ECharts树图中实现点击节点时收缩其子节点的功能。首先,我们需要理解ECharts的基本概念和树图的特性。 ...
不过,通常这样的博客文章会包含实现滑动层收缩效果的代码示例、原理分析以及如何将其整合到项目中的指导。 “源码”标签暗示了这篇博客可能包含实际的编程代码,可能是JavaScript、CSS或HTML,这些是创建滑动层...
在这个“列表收缩-JavaScript”的主题中,我们将探讨如何使用JavaScript实现这一功能,包括基础概念、实现方法和优化技巧。 1. **基础概念**: - **DOM操作**:在JavaScript中,我们通过Document Object Model ...
Bootstrap默认包含了一些过渡效果,但开发者也可以自定义CSS样式来实现更个性化的动画效果。 在实际项目中,可能还需要考虑到不同屏幕尺寸下的显示效果。Bootstrap的媒体查询(Media Queries)和`.navbar-expand-*`...
在本文中,我们将深入探讨如何在ECharts库中实现一个具有点击节点收缩(关闭子节点)功能的树形图表(Tree)。ECharts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,包括柱状图、折线图、饼图以及...
总的来说,layui侧边收缩菜单的实现涉及到HTML结构设计、layui模块的使用,以及JavaScript事件处理。通过合理布局和有效的交互设计,我们可以创建一个既美观又实用的侧边栏菜单,适应各种设备和用户需求。
本文将深入探讨如何使用jQuery实现"展开收缩"效果,这种效果常见于网上商城的商品详情展示、菜单导航等场景,为用户提供更加直观且易用的界面。 首先,我们需要了解jQuery的基本用法。jQuery通过选择器选中页面中的...
- **MtrSearchZTree.js**:这是一个JavaScript文件,可能包含了zTree的具体配置和操作逻辑,如初始化zTree对象、实现模糊查询功能等。 - **css**:这个目录可能包含zTree的CSS样式文件,用于定制节点的外观,如...
这个"js实现侧边隐藏菜单收缩特效代码.zip"压缩包显然包含了使用JavaScript编写的代码,用于创建一个具有侧边隐藏菜单收缩效果的网页元素。这种效果通常应用于响应式设计,使得在移动设备或小屏幕设备上,菜单可以更...
在实现“左侧可收缩导航”时,开发人员可能会采用以下技术: 1. HTML 结构:HTML5 提供了多种元素来构建导航结构,如`<nav>`、`<ul>`、`<li>`等。这些元素可以组合使用,创建出层次清晰的导航菜单。 2. CSS3:为了...
本文将深入探讨如何使用JavaScript来实现这种收缩式导航菜单。 首先,我们需要创建HTML结构。一个简单的收缩式导航菜单可能包含一个`<nav>`元素,里面有一些`<ul>`列表项,列表项可以进一步包含子菜单的`<ul>`。...
"c#导航弹性收缩展开菜单"是一个项目,旨在创建一个具有动态效果的PC端导航菜单,它使用JavaScript (js) 和jQuery (jq) 进行前端实现,以提供用户友好的交互体验。 在C#中,虽然主要处理后端逻辑,但也可以通过ASP...
这可以通过jQuery库或者原生JavaScript实现。以下是原生JavaScript的例子: ```javascript document.querySelectorAll('.parent').forEach(function(item) { item.addEventListener('click', function(e) { e....
本文将详细解析如何实现“tab菜单”的弹出和收缩效果,主要涉及HTML、CSS以及JavaScript(或者现代前端框架如React、Vue等)的相关知识。 首先,我们从HTML结构开始。一个简单的tab菜单通常由多个tab按钮和对应的...
然后,我们可以编写jQuery代码来实现菜单的展开和收缩。这里的核心是使用`.click()`事件监听器和`.slideToggle()`方法: ```javascript $(document).ready(function() { $("#menu ul li:has(ul)").click(function...
本话题聚焦于使用jQuery来实现一个功能:当一个菜单项展开时,其他菜单项不自动收缩。这通常涉及到菜单树的交互设计,尤其在创建多级导航菜单时十分常见。 菜单树是一种常见的UI组件,它允许用户通过层级结构来浏览...
这篇文章将详细讲解如何实现"js+css3圆环图标菜单展开收缩特效",以及涉及到的相关技术知识点。 首先,我们从标题和描述中可以得知,这是一个使用JavaScript和CSS3技术实现的交互式圆环菜单。菜单在默认状态下是...
通常,你会看到一个HTML文件(如`index.html`)包含了菜单结构,一个CSS文件(如`styles.css`)设置了样式,以及一个JS文件(如`script.js`)实现了菜单的收缩和展开逻辑。 以上就是关于“简单的菜单收缩代码”的...