WEB页面制作上下分区，可拖动以改变高度

本文代码实现效果为：将界面分成上下两部分，中间一条分割线，上下拖动分割线能重新分配上下两个div的大小

HTML界面分为4个div，代码：

         <!------------------------上半部分-------------------->
        <div id="topRows">
            <div id="footer1">
                
            </div>
            <!-------分界线------->
            <div id="expander"></div>
        </div>
        <!-------------------------下半部分------------------->
        <div id="bottomRows">
            
        </div>

 

CSS样式控制，代码：

        /* 上半部分 */
        #topRows {
            position: relative;
            width: 100%;
            height: 460px;
            margin-top: 0px;
            /*overflow:scroll;*/
            background-color: yellow;
        }
        #footer1 {
            height: 100%;
            width: 100%;
            overflow-y: auto;
            background-color: yellow;
        }

        /* 分割线 */
        #expander {
            position: absolute;
            width: 100%;
            height: 6px;
            background-color: #99F;
        }

        #expander:hover {
            cursor: n-resize;
        }

        /* 下半部分 */
        #bottomRows {
            text-align: center;
            height: 525px;
            width: 100%;
            margin-top: 10px;
            background-color: green;
        }

 

JS代码控制，代码：

    <script type="text/javascript">
        jQuery(document).ready(function () {
            var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 200;
            $("#expander").mousedown(function (e) {
                src_posi_Y = e.pageY;//鼠标指针的位置
                is_mouse_down = true;
            });
            $(document).bind("click mouseup", function (e) {
                if (is_mouse_down) {
                    is_mouse_down = false;
                }
            }).mousemove(function (e) {
                dest_posi_Y = e.pageY;
                move_Y = src_posi_Y - dest_posi_Y;
                src_posi_Y = dest_posi_Y;
                destHeight = $("#topRows").height() - move_Y;
                if (is_mouse_down) {
                    $("#topRows").css("height", destHeight > 100 ? destHeight : 100);
                };

            });
           
        });
    </script>