`

层收缩效果带滑动

阅读更多
<!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>

分享到:
评论
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{   
            ....  
        }   
    }

相关推荐

    滑动层收缩效果

    NULL 博文链接:https://eric-gao.iteye.com/blog/647705

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

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

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7....

    100多个JQuery效果示例(实例)div+css+javascrpit

    3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    jQuery+CSS实用图片收缩与放大效果插件 jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页多用的飞飞图片幻灯插件演示 jquery仿flash产品图片多角度...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery...

    SwipeBack:Android Activity滑动返回。支持4个方向,支持下层Activity联动和自定义动效

    支持自定义滑动时底部Activity联动动效(有2个自带效果,分别为视差(类似微信)和收缩(类似头条)) 支持设置全局和仅边缘可滑动返回 支持在全局时边缘强制可滑动返回(用于解决长滚动布局在滚动到中间时不方便...

    jquery 动态示例

    3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:新浪FLASH切换广告下载 61:不错的漂浮广告代码下载 62:24小时退弹一次的代码下载 63:顶部收缩广告效果yahoo-IE7下载 ...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:新浪FLASH切换广告下载 61:不错的漂浮广告代码下载 62:24小时退弹一次的代码下载 63:顶部收缩广告效果yahoo-IE7下载 ...

    CJL.js:Cloudgamer JavaScript 库

    [SlideView 图片滑动(扩展/收缩)展示效果] () [ImageZoom 图片放大效果] () [ImageZoom 图片放大效果(扩展篇)] () [ImagesLazyLoad 图片延迟加载效果] () [Lazyload 延迟加载效果] () [JavaScript 图片上传预览...

Global site tag (gtag.js) - Google Analytics