`

层收缩效果带滑动

HTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
	function expand(){		
		var obj = document.getElementById("bb");
		var h1 = obj.scrollHeight;
		var h2 = obj.offsetHeight;
		h2=h2+5;
		if(h2<h1){
			obj.style.height=h2;
			setTimeout("expand()",2);
		}else{
			obj.style.height=h1;
			document.getElementById('aa').innerHTML="收缩";
		}
	}
	function contract(){
		var obj = document.getElementById("bb");
		var h2 = obj.offsetHeight;
		h2 = h2-5;
		if(h2>0){
			obj.style.height=h2;
			setTimeout("contract()",2);
		}else{
			obj.style.height=1;
			obj.style.visibility="hidden";
			document.getElementById('aa').innerHTML="展开";
		}
	}
	function test(){
		var obj = document.getElementById("bb");
		//隐藏
		if(obj.style.visibility!="hidden")
		{	
			obj.style.visiblity="visible";
			setTimeout("contract()",2);
		}
		//展开
		else{
			obj.style.height = 1;
			obj.style.visibility="visible";
			setTimeout("expand()",2);
		}
	}
//-->
</SCRIPT>
 <BODY>
  <div>
	<div id="aa" style="background:#CCFFFF" onclick="test()">展开</div>
	<div id="bb" style="visibility:hidden;overflow-x:hidden;overflow:auto;overflow-y:hidden;background:#99FFFF;">
	<TABLE>
	<TR>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
	</TR>
	<TR>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
	</TR>
	<TR>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
		<TD>1</TD>
	</TR>
	</TABLE>
	</div>
  </div>
 </BODY>
</HTML>
分享到：
| java的socket通信的demo
评论
2 楼 qingyuexiao 2010-03-03  
function expand(){        
        ....  
        h2h2=h2+5;
        if(h2h2<h1){  
            obj.style.height=h2h2;  
            setTimeout("expand()",2);  
        }else{  
            ....
        }  
    }  
    function contract(){  
        ....
        h2h2 = h2-5;  
        if(h2h2>0){  
            obj.style.height=h2h2;  
            setTimeout("contract()",2);  
        }else{  
            .... 
        }  
    }
}
1 楼 qingyuexiao 2010-03-03  
两个方法里面参数写错了，应该是 
    function expand(){         
        ....   
        h2h2=h2+5; 
        if([color=red][b]h2h2[/b][/color]<h1){   
            obj.style.height=[color=red][b]h2h2[/b][/color];   
            setTimeout("expand()",2);   
        }else{   
            ....
        }   
    }   
    function contract(){   
        ....
        h2h2 = h2-5;   
        if([color=red][b]h2h2[/b][/color]>0){   
            obj.style.height=[color=red][b]h2h2[/b][/color];   
            setTimeout("contract()",2);   
        }else{   
            ....  
        }   
    }
发表评论

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

相关推荐

    滑动层收缩效果

    标题中的“滑动层收缩效果”指的是在网页设计或移动应用开发中常见的一种交互效果，通常用于导航菜单、侧边栏或任何可扩展和收缩的内容区域。这种效果允许用户通过滑动或点击来展开和收起内容，提高用户体验并节省...

    Android封装popwindow类（下拉菜单弹出和收缩效果）

    本教程将详细讲解如何封装一个`PopWindow`，实现下拉菜单的弹出和收缩效果。 首先，我们需要了解`PopWindow`的基本概念。`PopupWindow`是Android提供的一个轻量级窗口，它可以在Activity的任何位置显示，且可以...

    css3点击按钮左侧菜单收缩展出滑动特效

    这个特效允许用户通过点击一个按钮来展开或收起左侧的菜单栏，同时伴随着平滑的滑动效果，提升了用户体验。 首先，我们来详细解释CSS3中的关键特性在这一特效中的应用： 1. **选择器**：CSS3引入了更强大的选择器...

    jQuery上下收缩滑动树型菜单.zip

    这个函数会根据元素当前的状态（是否已展开）来执行滑动展开或滑动收缩的效果。结合`toggleClass()`函数，我们可以轻松地切换元素的展开/收缩状态。 总的来说，"jQuery上下收缩滑动树型菜单"是一个使用jQuery库和...

    Android ListView项收缩效果

    "Android ListView项收缩效果"指的是为ListView的每一项添加一种交互式的动画效果，即当用户点击某一项时，该项会进行收缩或展开操作，通常用于实现如折叠菜单、详细信息的隐藏与显示等功能。这种效果不仅提升了用户...

    左右可伸缩滑动门效果

    在"左右可伸缩滑动门效果"中，我们讨论的是一个能够向左右方向扩展或收缩的滑动门设计。 首先，我们需要理解这种效果的实现原理。这通常涉及到CSS（层叠样式表）和JavaScript的结合使用。CSS负责定义元素的样式，...

    （经典蓝色）可上下收缩滑动树型菜单

    在描述中提到的"上下收缩滑动"功能，是指这个菜单具有展开和折叠的交互效果。当用户点击某个节点时，其子节点会以滑动动画的方式动态显示或隐藏。这种效果不仅美观，还能有效地节省屏幕空间，使用户能更清晰地看到...

    多层滑动弹出Accordion手风琴导航菜单效果（jQuery）

    首先，"Accordion"这个名字来源于音乐中的手风琴乐器，因为这种菜单展开和折叠的动态效果与手风琴拉伸收缩的动作相似。手风琴菜单允许用户逐级展开或折叠子菜单，使得大量信息可以以紧凑的形式呈现，同时保持清晰的...

    CSS3左侧展开收缩图标菜单特效

    4. **绝对定位（Absolute Positioning）**：为了实现菜单项的滑动效果，我们可以使用绝对定位，使得菜单名称在图标下方的特定位置出现。同时，通过改变`left`或`right`属性，我们可以控制菜单项展开的方向。 5. **...

    近50种伸缩滑动折叠菜单(js、css、div实现)，有滑动导航、工具条，下拉菜单等，是目前web设计中导航效果最全面的打包文件

    在伸缩滑动折叠菜单中，JavaScript主要用于控制菜单的展开与折叠，响应用户的点击事件，以及实现平滑的动画效果。例如，可以编写函数来监听鼠标悬停或点击事件，然后通过修改元素的样式属性（如display或visibility...

    Android仿京东顶部搜索框滑动伸缩动画效果

    京东顶部搜索框的滑动伸缩动画效果就是一个很好的例子，它提升了用户的操作便捷性和界面的美观度。本篇文章将详细讲解如何在Android中实现类似的效果。 首先，我们要了解这个动画效果的基本构成。它由两个主要部分...

    js css3左侧侧边滑动菜单代码.zip

    这个压缩包包含了一个利用JavaScript（js）和CSS3技术来创建的网页左侧悬浮菜单，它能够实现滑动展开和收缩的效果。 首先，CSS3是层叠样式表的第三个主要版本，引入了许多新的特性和功能，使得网页设计更加灵活和...

    jQuery上下收缩滑动树型菜单特效代码

    【jQuery上下收缩滑动树型菜单特效代码】是一种在网页设计中常见的交互效果，它利用JavaScript库jQuery实现，为用户提供了一种优雅的方式来展示和隐藏菜单项。这种特效使得用户可以轻松地展开或收起菜单层级，提高...

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

    特别是CSS3的过渡和动画属性，可以实现平滑的展开和收缩效果。同时，CSS的媒体查询（Media Queries）还可以确保菜单在不同设备和屏幕尺寸上的响应式布局。 3. div元素：在HTML中，div是用于分组其他HTML元素的容器...

    CSS3搜索框展开收缩动画特效

    `可让元素缩小至原始尺寸的0%，实现收缩效果。 为了实现展开和收缩的动画，可以为搜索框添加一个类（如`.expanded`），并用JavaScript控制类的添加和移除。当类被添加时，通过修改`transform`属性的值，如`...

    WPF边侧滑出效果

    我们需要创建一个双精度动画，改变侧边栏的宽度或Margin属性来实现滑动效果。例如，从零宽度滑出到全宽度： ```xml Storyboard.TargetProperty="(FrameworkElement.Width)" From="0" To="{Binding ActualWidth,...

    jquery收集效果集合一些选项卡/菜单等很实用的特效

    JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...

    CSS中的滑动门技术 导航栏背景跟随鼠标滑动.pdf

    当标签内容变化时，“doorway”会随之扩展或收缩，背景图像也会相应滑动，呈现出动态的视觉效果。 创建滑动门导航栏的HTML结构通常使用无序列表（`&lt;ul&gt;`）和列表项（`&lt;li&gt;`）。为了实现滑动效果，CSS中会运用浮动...

    jquery滑动导航紫色风格

    在"jQuery滑动导航紫色风格"中，jQuery被用来实现导航条的各种动态效果，如菜单项的滑入滑出、下拉菜单的展开与收缩等。这使得用户在交互时能感受到平滑且响应迅速的体验，提升了网站的专业性和现代感。 滑动导航是...

    Dreamweaver CS6应用行为效果.pdf

    本文主要探讨了如何在Dreamweaver CS6中应用四种特定的行为效果：增大/收缩、挤压、晃动、显示/渐隐以及滑动和遮帘。 1. **增大/收缩行为效果**： 这一行为允许网页元素在触发事件时改变大小，创造出动态视觉效果...

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