打印

[ 共享 ] 层展开/关闭 - 运动缓冲效果

本主题由 caiying2007 于 2008-4-3 19:34 设置高亮

faeng220 [楼主]

小秦

银牌会员

帖子: 755
体力: 1529
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

1^# 大中小发表于 2008-4-3 18:40

有什么疑问看代码里面的函数注释...

下面上代码啦

<!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 || 200;
    var s = s || 1.2;
    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>

提示：您可以先修改部分代码再运行

再加一个简单的应用..

http://xqin.cn/terror.asp

[ 本帖最后由 caiying2007 于 2008-4-4 09:40 编辑 ]

偶系小秦！

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

angell8684

爱左看右

初级会员

帖子: 155
体力: 101
威望: 0
离线: 1 天

2^# 大中小发表于 2008-4-3 18:43

HOHO.. 慢慢伸缩的..

msleft.com 爱左看右

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

iou33449999

金牌会员

帖子: 1105
体力: 3262
威望: 0
当前: 陕西西安

专长 网页设计,ASP,Access

3^# 大中小发表于 2008-4-3 22:43

哇!您太走运了,程序竟然出错了啦!
详细情况
错误类型: 类型不匹配: 'a' 错误类别: Microsoft VBScript 运行时错误 (0x800A000D)
出错文件: /terror.asp 第 4 行错误描述: 类型不匹配: 'a' 时间: 2008年4月3日, 22:42:31

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

jyyjch

橙木

高级会员

帖子: 260
体力: 505
威望: 0
当前: 四川雅安
离线: 5 天

专长 网页设计,前端制作,文案

4^# 大中小发表于 2008-4-3 23:35

太汗了.... 晕死……

I'm Here.

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

caiying2007

版主

帖子: 2787
体力: 5328
威望: 10

5^# 大中小发表于 2008-4-4 09:43

建议LZ的实例演示更换一下内容，让人家以为“哇!您太走运了,程序竟然出错了啦!”是真的，忽略了欣赏效果

TOP

hanbelt

新手上路

帖子: 16
体力: 40
威望: 0
离线: 73 天

6^# 大中小发表于 2008-4-4 13:21

看IE7 里这页面： about:Tabs

“ 显示更多选项卡快捷方式 ”

TOP

hanbelt

新手上路

帖子: 16
体力: 40
威望: 0
离线: 73 天

7^# 大中小发表于 2008-4-4 13:22

看看那个是怎么实现的吧

[ 本帖最后由 hanbelt 于 2008-4-4 13:24 编辑 ]

TOP

vinsony

新手上路

帖子: 5
体力: 16
威望: 0

8^# 大中小发表于 2008-4-4 23:01

不错的说

TOP

lonelyfeel

新手上路

帖子: 4
体力: 11
威望: 0
离线: 134 天

9^# 大中小发表于 2008-4-4 23:35

帅死了,我要拿下了

TOP

faeng220 [楼主]

小秦

银牌会员

帖子: 755
体力: 1529
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

10^# 大中小发表于 2008-4-5 10:04

根据版主的建议...

http://xqin.cn/terror.asp

打开这个页面以后,在"详细信息"右侧有一个箭头, 你可以在 "详细信息" 这一行上,点击一下,就可以看到效果了..

至于其他的一些具体的应用,就要看大家自己的了...

希望大家可以举一反三...

偶系小秦！

TOP

深空

可爱宝贝

荣誉管理团队

帖子: 8825
体力: 12128
威望: 57
当前: 广东深圳
离线: 74 天

专长 JS,PHP,挖掘

11^# 大中小发表于 2008-4-5 10:14

能不能根据内部填充数据的高度来动态展开多少高，而不要写死高度？

二十多年了，没想到我们二十年前就已经约定。

TOP

faeng220 [楼主]

小秦

银牌会员

帖子: 755
体力: 1529
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

12^# 大中小发表于 2008-4-5 11:06

应楼上的这位版主的要求...

嘿嘿..先上代码吧..

<!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){
    var h = h || 200;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    if(obj == undefined){return false;}
    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(){
    var $ = function(id){return document.getElementById(id)};
    $('menu').onclick = function(){
        Scroll('menu',this.scrollHeight,1.2);
    }
    $('test').onclick = function(){
        Scroll('test',300,1.2);
    }
}
</script>
</head>
<body>
<div id="test" style="border:1px solid #f00;width:200px">单击后 展开指定高度 300px</div>
<div id="menu" style="position:absolute;top:10px;left: 400px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
单击后 根据展开的高度根据内容而变<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

原函数Scroll并未做修改...

只是在传值的时候传的是当前对象的高度,就可以了...

[ 本帖最后由 faeng220 于 2008-4-5 11:40 编辑 ]

本帖最近评分记录

caiying2007 威望 +1 不错，谢谢分享 2008-4-7 20:44

偶系小秦！

TOP

expression

高级会员

帖子: 922
体力: 727
威望: 0

13^# 大中小发表于 2008-4-5 11:27

<html><body>
<style>
body{font-size:12px;}
.s{width:300px; height:20px; background:red;overflow:hidden;}
.s .n{float: left;width:50%;color:#ffffff;line-height:20px;padding-left: 5px;font-weight: bold;}
.s .w{float: right;width:%24;color:#ffffff;line-height:20px;cursor:pointer;padding-right: 5px;}
.test{width:300px; height:20px; background:#ffffff;overflow:hidden; text-align:left;border:1px solid #ff0000;padding: 10px;}
</style>
<div id="s" class="s">
	<span class="n">我觉得至少应该是一个变速的感觉</span>
	<span class="w" onclick="ClosE('test','s')"> × </span>
	<span class="w" onclick="UpAndDown(document.getElementById('test'),100,20,1)"> □ </span>
	<span class="w" onclick="UpAndDown(document.getElementById('test'),100,0,-1)"> — </span>
</div>
<div id="test" class="test">
<Font Size=3 Face="楷体_GB2312"><Font Color="#FF00FF">七</Font><Font Color="#E300FF">岁</Font><Font Color="#C600FF">学</Font><Font Color="#A900FF">文</Font> <Font Color="#6F00FF">九</Font><Font Color="#5200FF">岁</Font><Font Color="#3500FF">习</Font><Font Color="#1800FF">武</Font> <Font Color="#001AFF">风</Font><Font Color="#0030FF">度</Font><Font Color="#0045FF">翩</Font><Font Color="#005BFF">翩</Font> <Font Color="#0087FF">英</Font><Font Color="#009DFF">明</Font><Font Color="#00B2FF">神</Font><Font Color="#00C0F4">武</Font> <Font Color="#00C0BA">遇</Font><Font Color="#00C09D">上</Font><Font Color="#00C080">蝴</Font><Font Color="#00C063">蝶</Font> <Font Color="#00C029">能</Font><Font Color="#00C00C">追</Font><Font Color="#11C000">能</Font><Font Color="#2EC000">扑</Font> <Font Color="#68C000">遇</Font><Font Color="#85C000">上</Font><Font Color="#A2C000">考</Font><Font Color="#BFC000">试</Font> <Font Color="#F9C000">能</Font><Font Color="#FFAF00">文</Font><Font Color="#FF9900">能</Font><Font Color="#FF8300">武</Font> <Font Color="#FF5800">乐</Font><Font Color="#FF4200">善</Font><Font Color="#FF2C00">好</Font><Font Color="#FF1600">施</Font> <Font Color="#FF1500">美</Font><Font Color="#FF2B00">女</Font><Font Color="#FF4100">回</Font><Font Color="#FF5700">头</Font> <Font Color="#FF8200">帅</Font><Font Color="#FF9800">哥</Font><Font Color="#FFAE00">跳</Font><Font Color="#FAC000">楼</Font> <Font Color="#C0C000">大</Font><Font Color="#A3C000">个</Font><Font Color="#86C000">1</Font><Font Color="#69C000">米</Font><Font Color="#4CC000">8</Font><Font Color="#2FC000">5</Font><Font Color="#12C000">!</Font><Font Color="#00C00B">脑</Font><Font Color="#00C028">瓜</Font><Font Color="#00C045">就</Font><Font Color="#00C062">占</Font><Font Color="#00C07F">1</Font><Font Color="#00C09C">米</Font><Font Color="#00C0B9">5</Font><Font Color="#00C0D6">!</Font><Font Color="#00C0F3">帅</Font><Font Color="#00B3FF">的</Font><Font Color="#009EFF">犹</Font><Font Color="#0088FF">如</Font><Font Color="#0072FF">长</Font><Font Color="#005CFF">江</Font><Font Color="#0046FF">黄</Font><Font Color="#0030FF">河</Font><Font Color="#001BFF">一</Font><Font Color="#0005FF">块</Font><Font Color="#1700FF">泛</Font><Font Color="#3400FF">滥</Font><Font Color="#5100FF">!</Font><Font Color="#6E00FF">问</Font><Font Color="#8B00FF">天</Font><Font Color="#A800FF">下</Font><Font Color="#C500FF">谁</Font><Font Color="#E200FF">比</Font><Font Color="#FF00FF">？</Font></Font>
</div>
<script language="javascript">
function getid(j){
	return document.getElementById(j);
}
function UpAndDown(o,max,min,n)
{
	var gN=parseInt(o.currentStyle.height);
	o.style.height=gN;
	return iTimer=setInterval(function(){
	    if(parseInt(o.currentStyle.height)==1 && n==-1)
	      o.style.display="none";
	    if(n==1)
	      o.style.display="block";
	    if((parseInt(o.currentStyle.height)==max && n==1)||(parseInt(o.currentStyle.height)==min && n==-1))
		{
	    	clearInterval(iTimer);
			return true;
		}
		gN+=n;
		o.style.height=gN;
	},2);
}
function ClosE(l,k){
	var l = getid(l);
	var k = getid(k);
	l.style.display="none";
	k.style.display="none";
	l=null;
	k=null;
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

彳亍日寺米青女少言亥言兑金童女子

TOP

superwf

新手上路

帖子: 13
体力: 35
威望: 0
当前: 北京朝阳区
离线: 103 天

14^# 大中小发表于 2008-4-8 12:03

回复 12# 的帖子

<!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){
var h = h || 200;
var s = s || 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == undefined){return false;}
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{
      if(oh > oldH){
         oh = Math.floor(oh-(oh-oldH)/s);
         obj.style.height = oh+"px";
      }else{
         obj.removeAttribute("status");
         window.clearInterval(IntervalId);
      }
      }
}
var IntervalId = window.setInterval(reSet,10);
return status;
}
window.onload= function(){
var $ = function(id){return document.getElementById(id)};
$('menu').onclick = function(){
      Scroll('menu',this.scrollHeight,1.1);
}
$('test').onclick = function(){
      Scroll('test',300,1.1);
}
}
</script>
</head>
<body>
<div id="test" style="border:1px solid #f00;width:200px">单击后展开指定高度 300px</div>
<div id="menu" style="position:absolute;top:10px;left: 400px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
单击后根据展开的高度根据内容而变<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
</div>
</body>
</html>

改了一点，把关闭层也加上了缓冲效果，也是顺着楼主的思路走的

[ 本帖最后由 caiying2007 于 2008-4-8 17:41 编辑 ]

TOP

loveguan

中级会员

帖子: 150
体力: 205
威望: 0
离线: 1 天

15^# 大中小发表于 2008-4-8 13:57

很好很强大。

TOP

lifespan

新手上路

帖子: 5
体力: 15
威望: 0
离线: 136 天

16^# 大中小发表于 2008-4-8 14:52

喜欢13楼的变化。

TOP

janelee

初级会员

帖子: 64
体力: 131
威望: 0
当前: 湖南长沙

专长 网页设计,前端制作,JS

17^# 大中小发表于 2008-4-8 16:22

效果蛮喜欢的！

TOP

caiying2007

版主

帖子: 2787
体力: 5328
威望: 10

18^# 大中小发表于 2008-4-8 17:45

回复 expression 在 13# 的帖子

小BUG:
连续点击"最大""最小"...

TOP

occult

中级会员

帖子: 133
体力: 289
威望: 0
当前: 广东中山
离线: 4 天

19^# 大中小发表于 2008-4-8 22:43

在FF下，如果收回去也能有缓冲效果就好了。
如果多个，可否展开一个的同时收缩另一个？

TOP

faeng220 [楼主]

小秦

银牌会员

帖子: 755
体力: 1529
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

20^# 大中小发表于 2008-4-8 23:11

首先谢谢,14楼的那个朋友.增加了关闭时的效果...

起初我没有加关闭的效果是因为关闭的速度太快了.加了效果反而觉得不好,当然每个人的看法都可能不同,如果想加关闭效果的话,就按14楼给出的代码使用.

下面再发一个,在那个效果的基础上所增加了一个效果...

具体是什么,看下面代码的运行结果就知道了...
此次还修正了一个小Bug...
在之前的代码中,在计算所得到对象的高度的时候,直接使用的是object.offsetHeight,这里所得到的高度是对象的高度加上边框的高度的总和,所以在还原对象的原来高度的时候会让原对象的高度增加.(具体增加的高度为原高度加它的边框的高度)
比如:

复制内容到剪贴板

代码:

<div id="menu" style="position:absolute;top:10px;left: 120px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;"></div>

这段代码中.它的高度为 16,而用obj.offsetHeight得到的高度为 18,也就是它的上下边框的高度(分别为1)加上它的高度(height)所得到的值.
如果听的不太明白的话,运行以下下面的代码,让它展开一次,再关闭,你就知道我说的是啥了...
注意展开关闭以后,右侧的高度..

<!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, w, s)
    参数说明:
        obj,[object]  id值或对象.     必需
          h,[height]  展开后的高度.   可选(默认为200px)
          w,[width]  展开后的宽度.   可选(默认为200px)
          s,[speed]   展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
    函数返回值:
        true    展开
        false   关闭
*/
function Scroll(obj, h, w, s){
    var h = h || 200;
    var w= w || 300;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    if(obj == undefined){return false;}
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight);
    var ow = parseInt(obj.offsetWidth);
    if(obj.getAttribute("oldHeight") == null || obj.getAttribute("oldWidth") == null){
        obj.setAttribute("oldHeight", oh);
        obj.setAttribute("oldWidth", ow);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldHeight"));
        var oldW = Math.ceil(obj.getAttribute("oldWidth"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.height = oh+"px";
            }
            if(ow < w){
                ow = Math.ceil(w-(w-ow)/s);
                obj.style.width = ow+"px";
            }
            if(oh >= h){
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
            }
        }else{
            obj.style.height = oldH+"px";
            obj.style.width = oldW+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
       return status;
}
window.onload= function(){
    var $ = function(id){return document.getElementById(id)};
    $('test').onclick = function(){
        if(Scroll('menu',520,630,1.09)){
          $('menu').innerHTML = '<span>展开状态</span>';
        }else{
          $('menu').innerHTML = '<span>关闭状态</span>';
        }
    }
}
</script>
</head>
<body>
<div id="test" style="position:absolute;top:10px;left: 58px;height:16px;border:1px solid #ccc;width:60px;text-align:center;cursor:pointer;">展开</div>
<div id="menu" style="position:absolute;top:10px;left: 120px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

在第一次的代码中,并未修正该计算的错误,导致还原对象高度的时候,增加了它的高度.
这次在计算它的高度的时候.减去了它的边框的高度,以得到它的真实高度

复制内容到剪贴板

代码:

    var oh = parseInt(obj.offsetHeight) - parseInt(obj.style.borderTopWidth) - parseInt(obj.style.borderBottomWidth);

    var ow = parseInt(obj.offsetWidth) - parseInt(obj.style.borderLeftWidth) - parseInt(obj.style.borderRightWidth);

下面是正确的效果...

<!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, w, s)
    参数说明:
        obj,[object]  id值或对象.     必需
          h,[height]  展开后的高度.   可选(默认为200px)
          w,[width]  展开后的宽度.   可选(默认为200px)
          s,[speed]   展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
    函数返回值:
        true    展开
        false   关闭
*/
function Scroll(obj, h, w, s){
    var h = h || 200;
    var w= w || 300;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    if(obj == undefined){return false;}
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight) - parseInt(obj.style.borderTopWidth) - parseInt(obj.style.borderBottomWidth);
    var ow = parseInt(obj.offsetWidth) - parseInt(obj.style.borderLeftWidth) - parseInt(obj.style.borderRightWidth);
    if(obj.getAttribute("oldHeight") == null || obj.getAttribute("oldWidth") == null){
        obj.setAttribute("oldHeight", oh);
        obj.setAttribute("oldWidth", ow);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldHeight"));
        var oldW = Math.ceil(obj.getAttribute("oldWidth"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.height = oh+"px";
            }
            if(ow < w){
                ow = Math.ceil(w-(w-ow)/s);
                obj.style.width = ow+"px";
            }
            if(oh >= h){
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
            }
        }else{
            obj.style.height = oldH+"px";
            obj.style.width = oldW+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
       return status;
}
window.onload= function(){
    var $ = function(id){return document.getElementById(id)};
    $('test').onclick = function(){
        if(Scroll('menu',520,630,1.09)){
          $('menu').innerHTML = '<span>展开状态</span>';
        }else{
          $('menu').innerHTML = '<span>关闭状态</span>';
        }
    }
}
</script>
</head>
<body>
<div id="test" style="position:absolute;top:10px;left: 58px;height:16px;border:1px solid #ccc;width:60px;text-align:center;cursor:pointer;">展开</div>
<div id="menu" style="position:absolute;top:10px;left: 120px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

更多的效果.等待大家的发现..大家一起动手完善它..
比如...这是增加高度和宽度的..你也可以让它改变left,top,bottom,right这些值,看看具体是什么效果..
比如下面这个是改变的left,top的值...
注意这段代码中与上段代码中的区别..

<!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, w, s)
    参数说明:
        obj,[object]  id值或对象.     必需
          h,[height]  展开后的高度.   可选(默认为200px)
          w,[width]  展开后的宽度.   可选(默认为200px)
          s,[speed]   展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
    函数返回值:
        true    展开
        false   关闭
*/
function Scroll(obj, h, w, s){
    var h = h || 200;
    var w= w || 300;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    if(obj == undefined){return false;}
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.style.left);
    var ow = parseInt(obj.style.top);
    if(obj.getAttribute("oldLeft") == null || obj.getAttribute("oldTop") == null){
        obj.setAttribute("oldLeft", oh);
        obj.setAttribute("oldTop", ow);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldLeft"));
        var oldW = Math.ceil(obj.getAttribute("oldTop"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.left = oh+"px";
            }
            if(ow < w){
                ow = Math.ceil(w-(w-ow)/s);
                obj.style.top = ow+"px";
            }
            if(oh >= h){
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
            }
        }else{
            obj.style.left = oldH+"px";
            obj.style.top = oldW+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
       return status;
}
window.onload= function(){
    var $ = function(id){return document.getElementById(id)};
    $('test').onclick = function(){
        Scroll('menu',420,230,1.09);
    }
}
</script>
</head>
<body>
<div id="test" style="position:absolute;top:10px;left: 58px;height:16px;border:1px solid #ccc;width:60px;text-align:center;cursor:pointer;">???</div>
<div id="menu" style="position:absolute;top:10px;left: 120px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 faeng220 于 2008-4-8 23:38 编辑 ]

偶系小秦！

TOP

faeng220 [楼主]

小秦

银牌会员

帖子: 755
体力: 1529
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

21^# 大中小发表于 2008-4-9 00:07

引用:

原帖由 occult 于 2008-4-8 22:43 发表
如果多个，可否展开一个的同时收缩另一个？

下面的代码可以.但是有一个小问题,,因为展开过程需要一定的时候,如果在没有完全展开的情况下,你又点了另一个,那么这两个都会展开..
具体问题,你看一下效果就知道了...

关于这个问题的解决办法.我目前还没有找到最好的解决办法...

<!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, w, s)
    参数说明:
        obj,[object]  id值或对象.     必需
          h,[height]  展开后的高度.   可选(默认为200px)
          w,[width]  展开后的宽度.   可选(默认为200px)
          s,[speed]   展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
    函数返回值:
        true    展开
        false   关闭
*/
function Scroll(obj, h, w, s){
    var h = h || 200;
    var w= w || 300;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    if(obj == undefined){return false;}
    var body = document.getElementsByTagName('body')[0];
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight) - Math.floor(obj.style.borderTopWidth) - Math.floor(obj.style.borderBottomWidth);
    var ow = parseInt(obj.offsetWidth) - Math.floor(obj.style.borderLeftWidth) - Math.floor(obj.style.borderRightWidth);
    if(obj.getAttribute("oldHeight") == null){
        obj.setAttribute("oldHeight", oh);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldHeight"));
    }
    if(obj.getAttribute("oldWidth") == null){
        obj.setAttribute("oldWidth", ow);
    }else{
        var oldW = Math.ceil(obj.getAttribute("oldWidth"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.height = oh+"px";
            }
            if(ow < w){
                ow = Math.ceil(w-(w-ow)/s);
                obj.style.width = ow+"px";
            }
            if(oh >= h){
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
           }
        }else{
            obj.style.height = oldH+"px";
            obj.style.width = oldW+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
     return status;
}
window.onload= function(){
    var $ = function(id){return document.getElementById(id)};
    var ad = $('test').getElementsByTagName('span');
    for (var i=0, l=ad.length; i<l; i++) {
      ad[i].onclick = function(){
          var ad1 = $('test').getElementsByTagName('span');
          for (var i1=0, l1=ad.length; i1<l1; i1++) {
            if(ad1[i1].getAttribute('status') == false){
              Scroll(ad1[i1], 400, 60, 1.2);
            }
          }
          Scroll(this, 400, 60, 1.2);
       }
    }
}
</script>
<style type="text/css">
#test span{
  float:left;
  margin-left: 10px;
  width: 100px;
  text-align: center;
  border:1px solid #ccc;
  cursor:pointer;
}
</style>
</head>
<body>
<div id='test'>
  <span>一</span>
  <span>二</span>
  <span>三</span>
  <span>四</span>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

偶系小秦！

TOP

by0001

高级会员

帖子: 484
体力: 989
威望: 1
当前: 广东深圳
离线: 1 天

专长 前端制作

22^# 大中小发表于 2008-4-9 08:47

太强悍，除13楼外都是兼容FF的，收藏先！

致力于web2.0研究

TOP

zquest9

新手上路

帖子: 60
体力: 42
威望: 0
当前: 浙江杭州
离线: 20 天

23^# 大中小发表于 2008-4-9 09:02

为什么加了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这段文档类型的描述后，IE8下就没反应了？

Nothing

TOP

gfishery

新手上路

帖子: 14
体力: 40
威望: 0
当前: 浙江衢州
离线: 48 天

24^# 大中小发表于 2008-4-28 21:19

您好!

您的bug能修一下吗?

TOP

gfishery

新手上路

帖子: 14
体力: 40
威望: 0
当前: 浙江衢州
离线: 48 天

25^# 大中小发表于 2008-4-28 21:20

我指的是13楼/他的感觉蛮好!

TOP