Js+CSS做出文本滑动折叠效果

<style>  #content {   font-size: 14px;   width: 681px;   height: 1px;   background: #eee;   padding: 0px;   border: 1px #eee double;   overflow: hidden;  }  #key {   color: red;   float: left;   margin-top: 1px;  }

 

<script>

  var s=20;  var minheight=1;  var maxheight=300;  function shoppingcat()  {   var key = document.getElementById("key").title;      if(content.style.pixelHeight==0)    content.style.pixelHeight=minheight;      if(key=="展开"){    content.style.pixelHeight+=s;         if(content.style.pixelHeight<maxheight){      setTimeout("shoppingcat();",1);     }else{      document.getElementById("key").title="关闭";      document.all.id_des.innerHTML = "";     }   }else{     content.style.pixelHeight-=s;     if(content.style.pixelHeight>minheight){      setTimeout("shoppingcat();",1);     }else{      document.getElementById("key").title="展开";      document.all.id_des.innerHTML = eWebEditor1.getHTML();     }   // document.getElementById("show").innerHTML = eWebEditor1.getHTML();    }     }  </script>

 

<TR>      <TD οnclick="shoppingcat();">       产品描述<font color="red">*</font>       <span id="key" οnclick="shoppingcat();" title="展开"></span></TD>            <TD colspan="3" οnclick="shoppingcat();" id="show">        <table ><tr><td id="id_des">             </td></tr></table>       <div id="content">       <INPUT type="hidden" name="content1" value="" >       <IFRAME ID="eWebEditor1" src="eWebEditor.jsp?id=content1&style=standard"         frameborder="0" scrolling="no" width="681" height="300"></IFRAME>      </div>       </TD>           </TR>