js层展开/关闭 - 运动缓冲效果


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 
  3. <head> 
  4. <title>层展开/关闭 - 运动缓冲效果</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  6. <script type="text/javascript"> 
  7. function Scroll(obj, h, s){ 
  8.     var hh = h || 200; 
  9.     var ss = s || 1.2; 
  10.     var obj = typeof(obj)=="string"?document.getElementById(obj):obj; 
  11.     if(obj == undefined){return false;} 
  12.     var status = obj.getAttribute("status")==null; 
  13.     var oh = parseInt(obj.offsetHeight); 
  14.     obj.style.height = oh
  15.     obj.style.display = "block"
  16.         obj.style.overflow = "hidden"
  17.     if(obj.getAttribute("oldHeight") == null){ 
  18.         obj.setAttribute("oldHeight", oh); 
  19.     }else{ 
  20.         var oldH = Math.ceil(obj.getAttribute("oldHeight")); 
  21.     } 
  22.     var reSet = function(){ 
  23.         if(status){ 
  24.             if(oh < h){ 
  25.                 oh = Math.ceil(h-(h-oh)/s); 
  26.                 obj.style.height = oh+"px"; 
  27.             }else{ 
  28.                 obj.setAttribute("status",false); 
  29.                 window.clearInterval(IntervalId); 
  30.             } 
  31.         }else{ 
  32.             obj.style.height = oldH+"px"; 
  33.             obj.removeAttribute("status"); 
  34.             window.clearInterval(IntervalId); 
  35.         } 
  36.     } 
  37.     var IntervalId = window.setInterval(reSet,10); 
  38.         return status; 
  39. window.onloadfunction(){ 
  40.     var $ = function(id){return document.getElementById(id)}; 
  41.     $('menu').onclick = function(){ 
  42.         Scroll('menu',this.scrollHeight,1.2); 
  43.     } 
  44.     $('test').onclick = function(){ 
  45.         Scroll('test',300,1.2); 
  46.     } 
  47. </script> 
  48. </head> 
  49. <body> 
  50. <div id="test" style="border:1px solid #f00;width:200px">单击后 展开指定高度 300px</div> 
  51. <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;"> 
  52. 单击后 根据展开的高度根据内容而变<br /> 
  53. 1<br /> 
  54. 2<br /> 
  55. 3<br /> 
  56. 4<br /> 
  57. 5<br /> 
  58. 6<br /> 
  59. 7<br /> 
  60. 8<br /> 
  61. 9<br /> 
  62. 10<br /> 
  63. 11<br /> 
  64. 12<br /> 
  65. 13<br /> 
  66. 14<br /> 
  67. 15<br /> 
  68. 16<br /> 
  69. 17<br /> 
  70. 18<br /> 
  71. 19<br /> 
  72. 20<br /> 
  73. 21<br /> 
  74. 22<br /> 
  75. 23<br /> 
  76. 24<br /> 
  77. 25<br /> 
  78. 26<br /> 
  79. 27<br /> 
  80. 28<br /> 
  81. 29<br /> 
  82. </div> 
  83. </body> 
  84. </html> 

 



      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/925215,如需转载请自行联系原作者




上一篇:微信开发之调起摄像头、本地展示图片、上传下载图片


下一篇:ExtJs十(ExtJs Mvc用户管理之二)