网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 表格图层 >> 正文
最新文章
· JS代码实现单元格移动效果
· JavaScript让表格的边框闪烁起来
· 网页Div层拖拽--Clone特效代码
· 可拖动的DIV层
· 简单拖曵的原理与实例
· 上传图片之前先预览图片
· 漂亮的Js拖动层,窗口拖拽(改变大小
· 隔行换色,鼠标划过改变颜色
· Js点击文字弹出层,点击层以外区域关
· CSS自动竖向排列的布局方法
热门文章
 js实现div区域块伸缩效果(toggle)
 js弹出层组件artDialog2.1正式版
 一个简单实用的jquery拖动插件jque
 JS仿EXCEL表格功能
 点击页面任何地方,将div隐藏,除了
 动态插入、添加删除表格行的JS代码
 带遮罩效果并可以拖动的DIV弹出层
 Js点击文字弹出层,点击层以外区域
 利用js向表格动态追加行
 JQuery EasyValidator表单验证插件
相关文章
没有相关文章
简单的层展开和收缩代码
来源:JavaEye 更新时间:2010/9/27 7:43:08 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <SCRIPT type="text/javascript">
    function expand(){  
      var obj = document.getElementById("bb");
      var h1 = obj.scrollHeight;
      var h2 = obj.offsetHeight;
      h2h2 = h2 + 5;
      if(h2h2 < h1){
        obj.style.height = h2h2;
        setTimeout("expand()",2);
      }else{
        obj.style.height = h1;
        document.getElementById('aa').innerHTML = "收缩";
      }
    }
    
    function contract(){
      var obj = document.getElementById("bb");
      var h2 = obj.offsetHeight;
      h2h2 = h2-5;
      if(h2h2 > 0){
        obj.style.height = h2h2;
        setTimeout("contract()", 2);
      }else{
        obj.style.height = 1;
        obj.style.visibility = "hidden";
        document.getElementById('aa').innerHTML = "展开";
      }
    }
    
    function test(){
      var obj = document.getElementById("bb");
      //隐藏
      if(obj.style.visibility != "hidden")
      { 
        obj.style.visiblity = "visible";
        setTimeout("contract()", 2);
      }
      //展开
      else{
        obj.style.height = 1;
        obj.style.visibility = "visible";
        setTimeout("expand()", 2);
      }
    }
  </SCRIPT>
  <BODY>
    <div>
      <div id="aa" style="background:#CCFFFF" onclick="test()">展开</div>
      <div id="bb" style="visibility:hidden;overflow-x:hidden;overflow:auto;overflow-y:hidden;background:#99FFFF;">
        <TABLE>
          <TR>
            <TD>1</TD>
            <TD>1</TD>
            <TD>1</TD>
            <TD>1</TD>
          </TR>
          <TR>
            <TD>2</TD>
            <TD>2</TD>
            <TD>2</TD>
            <TD>2</TD>
          </TR>
          <TR>
            <TD>3</TD>
            <TD>3</TD>
            <TD>3</TD>
            <TD>3</TD>
          </TR>
        </TABLE>
      </div>
    </div>
  </BODY>
</HTML>
△运行 ☉预览 #复制 +收藏
特效说明:
简单的层展开和收缩代码
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号