<!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" >單擊後 展開指定高度 300px</div> <div id="menu" > 單擊後 根據展開的高度根據內容而變<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>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
