js改变行高

谁有现成的例子
有上下两个div，如何用鼠标左键上下移动中间分割线改变这两个div的高度，但是保证这两个div的总高度固定，用div或table都可以
谢谢

解决方案 »

  1.   

    参考如下代码：
    <html>
    <head>
    <style type="text/css">
    #div_line{height:5px;background:Gray;cursor:s-resize;}
    #div_top{height:200px;background:Red;}
    #div_bottom{height:200px;background:Blue;}
    </style>
    </head>
    <body>
    <div id="div_top"></div>
    <div id="div_line"></div>
    <div id="div_bottom"></div>
    <script>
    function addEventHandler(target, type, func) {
    if (target.addEventListener)
    target.addEventListener(type, func, false);
    else if (target.attachEvent)
    target.attachEvent("on" + type, func);
    else target["on" + type] = func;
    }function removeEventHandler(target, type, func) {
    if (target.removeEventListener)
    target.removeEventListener(type, func, false);
    else if (target.detachEvent)
    target.detachEvent("on" + type, func);
    else delete target["on" + type];
    }// 拖动高度相关
    (function() {
    var div_line = document.getElementById("div_line");
    var div_top = document.getElementById("div_top");
    var div_bottom = document.getElementById("div_bottom"); var minHeight = 20;
    var styleTop = div_top.currentStyle || document.defaultView.getComputedStyle(div_top, null);
    var styleBottom = div_bottom.currentStyle || document.defaultView.getComputedStyle(div_bottom, null);
    var styleLine = div_line.currentStyle || document.defaultView.getComputedStyle(div_line, null);
    var allHeight = parseInt(styleTop.height) + parseInt(styleLine.height) + parseInt(styleBottom.height);

    var downTop, downHeight;
    var targetMousedown = function (e) {
    downTop = e.clientY;
    downHeight = parseInt(styleTop.height);
    addEventHandler(document, "mousemove", documentMousemove);
    addEventHandler(document, "mouseup", documentMouseup);
    addEventHandler(div_line, "losecapture", documentMouseup);
    if (div_line.setCapture) div_line.setCapture();
    addEventHandler(window, "blur", documentMouseup);
    if (e.preventDefault) e.preventDefault();
    };
    addEventHandler(div_line, "mousedown", targetMousedown); var documentMousemove = function (e) {
    if (window.getSelection)
    getSelection().removeAllRanges();
    else if (document.selection && document.selection.empty)
    document.selection.empty();
    var newHeight = downHeight + e.clientY - downTop;
    if (newHeight < minHeight || allHeight - newHeight < minHeight) return;
    div_top.style.height = newHeight + "px";
    div_bottom.style.height = allHeight - newHeight + "px";
    }; var documentMouseup = function (e) {
    removeEventHandler(document, "mousemove", documentMousemove);
    removeEventHandler(document, "mouseup", documentMouseup);
    removeEventHandler(div_line, "losecapture", documentMouseup);
    if (div_line.releaseCapture) div_line.releaseCapture();
    removeEventHandler(window, "blur", documentMouseup);
    };
    })();
    </script>
    </body>
    </html>
      

  2.   

    不过我咋看你的风格很神似《pro javascript tech》呢
      

  3.   

    本帖最后由 zswang 于 2010-05-20 09:43:29 编辑
      

  4.   

    1楼的朋友能否帮我实现这个想法？
    第二个表格行高列宽改变时第一个表会自动改变~~~
    （第二表行高列宽可能是因为内容变化而改变的）<body>
            <div class="leftPanel" style="width:80%; border:1px solid #CCCFFF;">
                <div class="leftTitle" style="width:40%; border:1px solid #ff0000;">
                        <table width="100%">
                            <tr rowspan="2" height="60px">
                              <th width="15%"><span class="LockCell LockCross lockRowBg">编号</span></th>
                                <th width="25%"><span class="LockCell LockCross lockRowBg">部门</span></th>
                                <th width="30%"><span class="LockCell LockCross lockRowBg">姓名</span></th>
                                <th width="30%"><span class="LockCell LockCross lockRowBg">月份</span></th>
                            </tr>
                        </table>
                </div>
                <div class="leftContent" id="leftContent" style="width:40%; border:1px solid #CCCCFF;">
                    <table width="100%">
                        <tr  height="30px">
                          <td width="15%">A1</td>
                            <td width="25%">A2</td>
                            <td width="30%">A3</td>
                            <td width="30%">A4</td>
                        </tr>
                        <tr  height="30px">
                          <td>B1</td>
                            <td>B2</td>
                            <td>B3</td>
                            <td>B4</td>
                        </tr>
                    </table>
                </div>
            </div>
    </body>