效果原帖在这：http://bbs.blueidea.com/viewthread.php?tid=2844175&extra=&page=1
我主要是自己在学习这段脚本的时候，给自己弄个小档案，同时也写了注释，方便自己，也分享给大家。

先预览下效果：

提示：你可以先修改部分代码再运行。


对其中的js我做了很简单的注释。

  1. var oWE="500"; //层的宽度
  2. var oHE="200"; //层的高度
  3. var proX;
  4. var proY;
  5. //打开层fd
  6. function show(id){
  7.     clearInterval(proX);
  8.     clearInterval(proY);
  9. //先定义将要展开层(fd)的属性,包括高度，长度。
  10.     o=document.getElementById(id);
  11.     o.style.display="block";
  12.     o.style.width="1px";
  13.     o.style.height="1px";
  14.     proX=setInterval(function(){openX(o,oWE)},10);
  15. }
  16.  
  17. //层fd的宽度
  18. function openX(o,x){
  19.     oWN=parseInt(o.style.width); //parseInt 将变量转换为整数
  20.     if (x > oWN){
  21.         o.style.width=(oWN+Math.ceil((x-oWN)/5))+"px";//让它有渐进的效果,也可以使用固定值代替
  22.     }else{
  23.         clearInterval(proX);
  24.         proY=setInterval(function(){openY(o,oHE)},10);
  25.     }
  26. }
  27.  
  28. //层fd的高度
  29. function openY(o,y){
  30.     oHN=parseInt(o.style.height);
  31.     if (y > oHN){
  32.         o.style.height=oHN+Math.ceil((y-oHN)/5)+"px";
  33.     }else{
  34.         clearInterval(proY);
  35.     }
  36. }
  37.  
  38. //关闭层fd
  39. function closed(id){
  40.     clearInterval(proX);
  41.     clearInterval(proY);
  42.     o=document.getElementById(id);
  43.     if (o.style.display=="block"){
  44.         proYc=setInterval(function(){closeY(o)},10);//先关闭y轴,再关闭x轴
  45.     }
  46. }
  47. function closeY(o){
  48.     oHN=parseInt(o.style.height);
  49.     if (oHN > 0){
  50.         o.style.height= (oHN - Math.ceil(oHN/5))+"px";
  51.     }else{
  52.         clearInterval(proYc);
  53.         proXc=setInterval(function(){closeX(o)},10);
  54.     }
  55. }
  56. function closeX(o){
  57.     oWN=parseInt(o.style.width);
  58.     if (oWN > 0){
  59.         o.style.width=(oWN- Math.ceil(oWN/5))+ "px";
  60.     }else{
  61.         clearInterval(proXc);
  62.         o.style.display="none";
  63.     }
  64. }


无觅相关文章插件，快速提升流量