javascript 层展开/关闭，带缓冲效果

<!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="小秦" /> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F*%20%0D%0A%E5%87%BD%E6%95%B0%E5%90%8D%E7%A7%B0%3A%20Scroll%20%0D%0AScroll(obj%2C%20h%2C%20s)%20%0D%0A%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E%3A%20%0D%0Aobj%2C%5Bobject%5D%20id%E5%80%BC%E6%88%96%E5%AF%B9%E8%B1%A1.%20%E5%BF%85%E9%9C%80%20%0D%0Ah%2C%5Bheight%5D%20%E5%B1%95%E5%BC%80%E5%90%8E%E7%9A%84%E9%AB%98%E5%BA%A6.%20%E5%8F%AF%E9%80%89(%E9%BB%98%E8%AE%A4%E4%B8%BA200px)%20%0D%0As%2C%5Bspeed%5D%20%E5%B1%95%E5%BC%80%E9%80%9F%E5%BA%A6%2C%E5%80%BC%E8%B6%8A%E5%B0%8F%E5%B1%95%E5%BC%80%E9%80%9F%E5%BA%A6%E8%B6%8A%E6%85%A2.%20%E5%8F%AF%E9%80%89(%E9%BB%98%E8%AE%A4%E4%B8%BA1.2)%7B%E5%BB%BA%E8%AE%AE%E5%8F%96%E5%80%BC%E4%B8%BA1.1%E5%88%B02.0%E4%B9%8B%E9%97%B4%5B%E4%BE%8B%E5%A6%82%3A1.17%5D%7D.%20%0D%0A%E5%87%BD%E6%95%B0%E8%BF%94%E5%9B%9E%E5%80%BC%3A%20%0D%0Atrue%20%E5%B1%95%E5%BC%80(%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%AB%98%E5%BA%A6%E7%AD%89%E4%BA%8E%E5%B1%95%E5%BC%80%E5%90%8E%E7%9A%84%E9%AB%98%E5%BA%A6)%20%0D%0Afalse%20%E5%85%B3%E9%97%AD(%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%AB%98%E5%BA%A6%E7%AD%89%E4%BA%8E%E5%8E%9F%E5%A7%8B%E9%AB%98%E5%BA%A6)%20%0D%0A*%2F%20%0D%0Afunction%20Scroll(obj%2C%20h%2C%20s)%7B%20%0D%0Avar%20h%20%3D%20h%20%7C%7C%20200%3B%20%0D%0Avar%20s%20%3D%20s%20%7C%7C%201.2%3B%20%0D%0Avar%20obj%20%3D%20typeof(obj)%3D%3D%22string%22%3Fdocument.getElementById(obj)%3Aobj%3B%20%0D%0Aif(obj%20%3D%3D%20undefined)%7Breturn%20false%3B%7D%20%0D%0Avar%20status%20%3D%20obj.getAttribute(%22status%22)%3D%3Dnull%3B%20%0D%0Avar%20oh%20%3D%20parseInt(obj.offsetHeight)%3B%20%0D%0Aobj.style.height%20%3D%20oh%3B%20%0D%0Aobj.style.display%20%3D%20%22block%22%3B%20%0D%0Aobj.style.overflow%20%3D%20%22hidden%22%3B%20%0D%0Aif(obj.getAttribute(%22oldHeight%22)%20%3D%3D%20null)%7B%20%0D%0Aobj.setAttribute(%22oldHeight%22%2C%20oh)%3B%20%0D%0A%7Delse%7B%20%0D%0Avar%20oldH%20%3D%20Math.ceil(obj.getAttribute(%22oldHeight%22))%3B%20%0D%0A%7D%20%0D%0Avar%20reSet%20%3D%20function()%7B%20%0D%0Aif(status)%7B%20%0D%0Aif(oh%20%3C%20h)%7B%20%0D%0Aoh%20%3D%20Math.ceil(h-(h-oh)%2Fs)%3B%20%0D%0Aobj.style.height%20%3D%20oh%2B%22px%22%3B%20%0D%0A%7Delse%7B%20%0D%0Aobj.setAttribute(%22status%22%2Cfalse)%3B%20%0D%0Awindow.clearInterval(IntervalId)%3B%20%0D%0A%7D%20%0D%0A%7Delse%7B%20%0D%0Aobj.style.height%20%3D%20oldH%2B%22px%22%3B%20%0D%0Aobj.removeAttribute(%22status%22)%3B%20%0D%0Awindow.clearInterval(IntervalId)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20IntervalId%20%3D%20window.setInterval(reSet%2C10)%3B%20%0D%0Areturn%20status%3B%20%0D%0A%7D%20%0D%0Awindow.onload%3D%20function()%7B%20%0D%0Avar%20%24%20%3D%20function(id)%7Breturn%20document.getElementById(id)%7D%3B%20%0D%0A%24('menu').onclick%20%3D%20function()%7B%20%0D%0AScroll('menu'%2Cthis.scrollHeight%2C1.2)%3B%20%0D%0A%7D%20%0D%0A%24('test').onclick%20%3D%20function()%7B%20%0D%0AScroll('test'%2C300%2C1.2)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</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;"> 
单击后 根据展开的高度根据内容而变 
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 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程