关闭，带缓冲效果

<！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> 单击后展开指定高度 300px单击后根据展开的高度根据内容而变 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]