JS点击睁开层代码，指定层高度和自顺应像素

发布时间：2018-08-17 16:24:19 所属栏目：活动来源：站长网

导读：JS点击睁开层代码，指定层高度和自顺应像素。行为缓冲结果,单击后按照睁开的高度按照内容而变.参数声名: obj,[object] id值或工具. 必须 h,[height] 睁开后的高度. 可选(默以为200px) s,[speed] 睁开速率,值越小睁开速率越慢. 可选(默以为1.2){提议取值

　　JS点击睁开层代码，指定层高度和自顺应像素。行为缓冲结果,单击后按照睁开的高度按照内容而变.参数声名:

　　obj,[object] id值或工具. 必须

　　h,[height] 睁开后的高度. 可选(默以为200px)

　　s,[speed] 睁开速率,值越小睁开速率越慢. 可选(默以为1.2){提议取值为1.1到2.0之间[譬喻:1.17]}.

　　函数返回值:

　　true 睁开(工具的高度便是睁开后的高度)

　　false 封锁(工具的高度便是原始高度)

　　演示代码：

<!DOCTYPE html> <html> <head> <title>层睁开/封锁 - 行为缓冲结果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript"> 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 /> ve<br /> ry<br /> hu<br /> o.<br /> com<br /> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!