当前位置：首页 > 资讯 > 技术文档

带缓冲的收缩与展开内容效果

时间：2022-06-13 21:46 编辑：来源：阅读：
扫一扫，手机访问

摘要：带缓冲的收缩与展开内容效果

兼容ie5.5+ firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试) 看到blueidea很多朋友都发了一些收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵. 最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢. 这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵. 放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!!

[url=#] </tr> </table> </div> <div id="test" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这<br> 里<br> 是<br> 第<br> 二<br> ,<br> 很<br> 正<br> 常<br></td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> <br> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab"><a href="#" onClick="Effect('test1',this.parentNode.id);">关闭</a></td> </tr> </table> </div> <div id="test1" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这<br> 里<br> 是<br> 第<br> 一<br> ,<br> 很<br> 正<br> 常<br></td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> </body> </html>

两个都关闭的状态

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

一个打开一个关闭的状态

<div id="control"> 
  <table border="0" cellpadding="0" cellspacing="0" height="30" width="100%"> 
    <tr> 
      <td align="center" bgcolor="#2DD5FF" id="testtab" width="100%">[url=http://www.1sucai.cn/article/12372.htm#]关闭[/url]</td> 
    </tr> 
  </table> 
</div> 
<div class="test" id="test" style="display:block;"> 
  <table bgcolor="#EEEEEE" border="0" cellpadding="4" cellspacing="0" height="130" width="100%"> 
    <tr> 
      <td align="center" colspan="3" valign="top">这
 
        里
 
        是
 
        第
 
        二
 
        ,
 
        很
 
        正
 
        常
</td> 
    </tr> 
  </table> 
</div> 
<div id="control"> 
  <table border="0" cellpadding="0" cellspacing="0" height="10" width="100%"> 
    <tr> 
      <td align="center" bgcolor="#00C0F0" valign="bottom" width="100%"><span class="STYLE1">▲</span></td> 
    </tr> 
  </table> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

美化下的

[center] 
<div id="control"> 
  <table border="0" cellpadding="0" cellspacing="0" height="30" width="100%"> 
    <tr> 
      <td align="center" bgcolor="#2DD5FF" id="testtab" width="100%">[url=http://www.1sucai.cn/article/12372.htm#]闭月羞花[/url]</td> 
    </tr> 
  </table> 
</div> 
<div class="test" id="test"> 
  <table bgcolor="#EEEEEE" border="0" cellpadding="4" cellspacing="0" height="130" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366);" width="100%"> 
    <tr> 
      <td align="center" colspan="3" valign="top"> 
<font face="微软简行楷" size="4"><font color="#FF00FF">变</font><font color="#C000FF">焦</font><font color="#8000FF">基 
</font><font color="#4000FF">本</font><font color="#0000FF">靠</font><font color="#0030FF">走</font><font color="#0060FF">， 
</font><font color="#0090FF">对</font><font color="#00C0FF">焦</font><font color="#00C0C0">基</font><font color="#00C080">本 
</font><font color="#00C040">靠</font><font color="#00C000">扭</font><font color="#3FC000">，</font><font color="#7FC000">遮 
</font><font color="#BFC000">光</font><font color="#FFC000">基</font><font color="#FF9000">本</font><font color="#FF6000">靠 
</font><font color="#FF3000">手</font><font color="#FF0000">，</font><font color="#FF0000">虚</font><font color="#FF3000">化 
</font><font color="#FF6000">基</font><font color="#FF9000">本</font><font color="#FFC000">靠</font><font color="#C0C000">抖 
</font><font color="#80C000">，</font><font color="#40C000">测</font><font color="#00C000">光</font><font color="#00C03F">基 
</font><font color="#00C07F">本</font><font color="#00C0BF">靠</font><font color="#00C0FF">瞅</font><font color="#0090FF">， 
</font><font color="#0060FF">防</font><font color="#0030FF">抖</font><font color="#0000FF">基</font><font color="#3F00FF">本 
</font><font color="#7F00FF">靠</font><font color="#BF00FF">肘</font><font color="#FF00FF">。</font></font>

</td> 
    </tr> 
  </table> 
</div> 
<div id="control"> 
  <table border="0" cellpadding="0" cellspacing="0" height="10" width="100%"> 
    <tr> 
      <td align="center" bgcolor="#00C0F0" valign="bottom" width="100%"><span class="STYLE1">▲</span></td> 
    </tr> 
  </table> 
</div>

<div id="control"> 
  <table border="0" cellpadding="0" cellspacing="0" height="30" width="100%"> 
    <tr> 
      <td align="center" bgcolor="#2DD5FF" id="test1tab" width="100%">[url=http://www.1sucai.cn/article/12372.htm#]闭月羞花[/url]</td> 
    </tr> 
  </table> 
</div> 
<div class="test" id="test1"> 
  <table bgcolor="#EEEEEE" border="0" cellpadding="4" cellspacing="0" height="130" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366);" width="100%"> 
    <tr> 
      <td align="center" colspan="3" valign="top"> 
<font face="微软简行楷" size="4"><font color="#FF00FF">春</font><font color="#A400FF">天</font><font color="#4900FF">,</font><font color="#000DFF">我</font><font color="#0052FF">把</font><font color="#0096FF">老</font><font color="#00C0DB">婆</font><font color="#00C080">埋</font><font color="#00C025">在</font><font color="#36C000">地</font><font color="#91C000">底</font><font color="#ECC000">下</font><font color="#FF8A00">,</font><font color="#FF4500">秋</font><font color="#FF0000">天</font><font color="#FF4400">,</font><font color="#FF8900">我</font><font color="#EDC000">就</font><font color="#92C000">有</font><font color="#37C000">好</font><font color="#00C024">多</font><font color="#00C07F">老</font><font color="#00C0DA">婆</font><font color="#0097FF">.</font><font color="#0053FF">.</font><font color="#000EFF">.</font><font color="#4800FF">.</font><font color="#A300FF">.</font><font color="#FF00FF">.</font></font>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
下一篇：javascript返回顶部的按钮实现方法

资讯排行榜
更多>>

带缓冲的 收缩与展开内容效果

带缓冲的收缩与展开内容效果