`

折叠、展开

HTML 
阅读更多 
<html>
<head>
<title>展的折叠、展开</title>
<style> 
#content {
	font-size: 14px;
	width: 1000px;
	height: 500px;
	background: #eee;
	padding: 10px;
	border: 4px #ccc double;
	overflow: hidden;
}
#key {
	color: red;
	float: right;
	margin-top: 0px;
}
</style>
<script>
var s=50;
var minheight=50;
var maxheight=500;
function shoppingcat(){
	var key = document.getElementById("key").innerText;
	if(content.style.pixelHeight==0)content.style.pixelHeight=minheight;
	if(key=="展开"){
		content.style.pixelHeight+=s;
		if(content.style.pixelHeight<maxheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="关闭";
		}
	}else{
		content.style.pixelHeight-=s;
		if(content.style.pixelHeight>minheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="展开";
		}
	}
}
</script>
</head>
<body>
	<span id="key" onclick="shoppingcat();">展开</span>
	<div id="content"> 
		源码爱好者
		<br><br>
		源码爱好者源码下载。
	</div>
</body>
</html>
分享到：
| 网页上适时显示的时间&倒计时
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV折叠展开DIV折叠展开

    ### DIV折叠展开基础知识 #### 1. HTML 结构设计 在网页开发中，经常需要实现某些内容区域的显示与隐藏功能，即所谓的“折叠”与“展开”。这可以通过改变元素的`display`属性来实现。在本例中，通过HTML与...

    QTableView 切换折叠展开图标

    本篇我们将深入探讨如何在`QTableView`中实现切换折叠展开图标的功能，这对于处理层级结构的数据特别有用。 首先，`QTableView`本身并不直接支持折叠和展开功能，因为它是为平面表格设计的。但通过结合`...

    WPF实现Expander折叠展开动画

    实现Expander的折叠展开动画可以为用户界面增添动态效果，提高用户体验。下面我们将详细探讨如何在WPF中自定义Expander样式，并实现折叠展开的动画效果。 首先，我们需要理解Expander的基本结构。Expander包含一个...

    前端展示json数据，格式化，可折叠展开

    总之，前端展示JSON数据，格式化并支持折叠展开，是提高用户体验和增强数据可视化的有效手段。无论是手动编写代码还是利用现有库，都需要理解JSON的结构和JavaScript的遍历机制，以及HTML和CSS的交互设计。通过不断...

    窗体似菜单一样可折叠展开 VC 菜单面板源码.rar

    VC 实现的窗体可折叠展开的百叶窗效果，窗体似菜单一样可折叠展开，挖墙脚是一个面板一样，用鼠标点击的时候，可折叠指定部分，当然也可展开此部分，就像Windows窗口左侧的形式差不多，可显示大概的和详细的内容，...

    Listview嵌套Listview，支持折叠展开

    总之，实现ListView嵌套ListView并支持折叠展开需要对Android的ListView机制有深入理解，包括Adapter、视图复用和事件处理。合理的设计和优化可以为用户提供直观且高效的界面。在实际开发中，可以根据项目需求选择...

    可折叠展开的DataGridView控件

    使用说明： 1.使用时先添加CollapseDataGridView自定控件的引用，DLL文件在CollapseDataGridView类库文件夹中 2.详细的调用方法见示例，打开解决方案 Test.sln 即可 3.刚打开的时候，可能会提示加载控件出错误，...

    基于jq ui 可折叠展开框架页

    这个"基于jq ui 可折叠展开框架页"项目，就是利用jQuery UI的特性构建了一个可折叠、可展开的框架页面，适用于创建交互性强、用户体验良好的网页应用。 jQuery UI的核心功能在于提供了一系列预先封装好的UI组件，如...

    漂亮的垂直折叠展开的后台管理菜单.rar

    漂亮的垂直折叠展开的后台管理菜单，若鼠标点击后，菜单会收起来，再次点击后，菜单就合拢，很多网站的后台管理部分，在后台网页的左侧部分，经常见到这种菜单的身影。本款菜单运用的技术并不算新颖，基于Table布局...

    VC++折叠展开型（百叶窗）的窗体面板组

    在VC++编程环境中，开发一款具有折叠展开效果的“百叶窗”窗体面板组是一项技术挑战，它涉及到用户界面（UI）设计、控件管理以及动态布局等多个方面。这种类型的窗体面板组通常用于创建更为灵活且交互性强的用户界面...

    android TextView段落文本折叠展开效果Demo

    本篇将详细介绍如何实现`TextView`的段落文本折叠展开效果，并提供一个名为`TextExpandOrFoldDemo-master`的示例项目作为参考。 首先，`TextView`的默认行为并不包含自动折叠功能。要实现这个效果，我们需要自定义...

    点击折叠展开风琴效果css代码-jquery 折叠展开.rar

    "点击折叠展开风琴效果"是一种常见的交互设计模式，常用于导航菜单、FAQs或任何需要节省空间并保持内容组织清晰的场景。这种效果允许用户通过点击来展开或折叠内容区域，只显示一个或几个相关的部分，其余则保持隐藏...

    android TextView 折叠展开

    以上就是一个基本的`TextView`折叠展开功能的实现方式。在实际项目中，你可能需要根据需求进行一些定制，比如添加动画效果、设置不同的折叠提示图标等。通过不断迭代和优化，可以打造出更加符合用户需求的文本展示...

    通过Expander修改模板实现 左右&上下伸缩的方法以及第三种DoubleAnimation折叠展开的方法

    无论是左右伸缩、上下伸缩还是折叠展开动画，这些技巧都能使WPF应用程序的界面变得更加生动且专业。在实际开发中，可以根据需求调整动画参数，如速度、缓动函数等，以达到理想中的动画效果。 在提供的压缩包文件...

    Android多行文本折叠展开效果

    - 单行文本水平触摸滑动效果 通过EditText实现TextView单行长文本水平滑动效果 - 多行文本折叠展开 自定义布局View实现多行文本折叠和展开 详见： http://blog.csdn.net/jdsjlzx/article/details/45821909

    七年级数学下专题之折叠展开问题PPT课件.pptx

    1. **折叠展开问题**：在三维几何中，折叠展开问题是研究立体图形如何通过平面图形来表示的问题。例如，一个无盖的长方体盒子的展开图必须满足特定条件，不能有任何交叉或重叠的部分。题目中提到了判断哪些平面图形...

    仿QQ主窗体Delphi折叠展开面板..rar

    在本文中，我们将深入探讨如何使用Delphi编程语言来实现一个仿QQ主窗体的折叠展开面板功能。Delphi是一款强大的RAD（快速应用程序开发）工具，尤其适合创建Windows桌面应用程序。QQ作为一款流行的即时通讯软件，其...

    JS141-06可折叠展开的导航菜单

    "JS141-06可折叠展开的导航菜单"是一个专门针对这一需求设计的JavaScript解决方案。这个技术允许用户在页面上创建交互式、可折叠的菜单，优化了用户的浏览体验，特别是对于内容丰富的网站来说更为重要。 首先，我们...

    c#实现可折叠展开的DataGridView（提供dll源码及调用示例）

    1.使用时先添加CollapseDataGridView自定控件的引用，DLL文件在CollapseDataGridView类库文件夹中 2.详细的调用方法见示例，打开解决方案 Test.sln 便可 3.通过循环套循环，可实现对数据库的操作。

Magicbox
Global site tag (gtag.js) - Google Analytics