多个折叠层，动态展开层，其它层自动收缩效果

发布时间：2018-08-16 00:22:03 所属栏目：活动来源：站长网

导读：多个折叠层，动态展开层，其它层自动收缩效果。带动画、运动缓冲效果的层效果，使用了一个JS封装类，在一个页面同时布局多个层展开效果，点击后按高度向下展开，有需要的朋友自己复制研究吧。示例： !DOCTYPE htmlhtmlheadtitle层展开/关闭 - 运动缓冲

　　多个折叠层，动态展开层，其它层自动收缩效果。带动画、运动缓冲效果的层效果，使用了一个JS封装类，在一个页面同时布局多个层展开效果，点击后按高度向下展开，有需要的朋友自己复制研究吧。

　　示例：

<!DOCTYPE html> <html> <head> <title>层展开/关闭 - 运动缓冲效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript"> /* 函数名称: Scroll Scroll(obj, h, w, s) 参数说明: obj,[object] id值或对象. 必需 h,[height] 展开后的高度. 可选(默认为200px) w,[width] 展开后的宽度. 可选(默认为200px) s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}. 函数返回值: true 展开 false 关闭 */ function Scroll(obj, h, w, s){ var h = h || 200; var w= w || 300; var s = s || 1.2; var obj = typeof(obj)=="string"?document.getElementById(obj):obj; if(obj == undefined){return false;} var body = document.getElementsByTagName('body')[0]; var status = obj.getAttribute("status")==null; var oh = parseInt(obj.offsetHeight) - Math.floor(obj.style.borderTopWidth) - Math.floor(obj.style.borderBottomWidth); var ow = parseInt(obj.offsetWidth) - Math.floor(obj.style.borderLeftWidth) - Math.floor(obj.style.borderRightWidth); if(obj.getAttribute("oldHeight") == null){ obj.setAttribute("oldHeight", oh); }else{ var oldH = Math.ceil(obj.getAttribute("oldHeight")); } if(obj.getAttribute("oldWidth") == null){ obj.setAttribute("oldWidth", ow); }else{ var oldW = Math.ceil(obj.getAttribute("oldWidth")); } var reSet = function(){ if(status){ if(oh < h){ oh = Math.ceil(h-(h-oh)/s); obj.style.height = oh+"px"; } if(ow < w){ ow = Math.ceil(w-(w-ow)/s); obj.style.width = ow+"px"; } if(oh >= h){ obj.setAttribute("status",false); window.clearInterval(IntervalId); } }else{ obj.style.height = oldH+"px"; obj.style.width = oldW+"px"; obj.removeAttribute("status"); window.clearInterval(IntervalId); } } var IntervalId = window.setInterval(reSet,10); return status; } // Downloads By http://www.veryhuo.com/down window.onload= function(){ var $ = function(id){return document.getElementById(id)}; var ad = $('test').getElementsByTagName('span'); for (var i=0, l=ad.length; i<l; i++) { ad[i].onclick = function(){ var ad1 = $('test').getElementsByTagName('span'); for (var i1=0, l1=ad.length; i1<l1; i1++) { if(ad1[i1].getAttribute('status') == false){ Scroll(ad1[i1], 400, 60, 1.2); } } Scroll(this, 400, 60, 1.2); } } } </script> <style type="text/css"> #test span{ float:left; margin-left: 10px; width: 100px; text-align: center; border:1px solid #ccc; cursor:pointer; } </style> </head> <body> <div id='test'> <span>一</span> <span>二</span> <span>三</span> <span>四</span> </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>
提示：可修改后代码再运行!

（编辑：核心网）

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