javascript 層展開/關閉，帶緩沖效果

2019-11-21 01:24:19

字體：大中小

來源：轉載

供稿：網友

<!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="http://m.survivalescaperooms.com/"/> <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 class="iwvjtn8m0" id="test" style="border:1px solid #f00;width:200px">單擊后 展開指定高度 300px</div> <div class="iwvjtn8m0" 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需刷新才能執行]

上一篇：仿淘寶首頁分類列表效果實現代碼

下一篇：JS幻想讀取二進制文件第1/2頁