一个关于js splitter效果的问题

首先说明我会把分集中给那些给于了有用的回答的人。
手头上要做一个效果：页面分左右栏，中间有一个分隔符可以拖动它来改变左右栏的宽度。我做了一个效果， 但是当页面上有内容的时候，拖动就会有问题（鼠标不听话了），当页面没有内容的时候拖动是正常的。请js高手帮看一下。
jquery的splitter插件我也试过，有同样的问题。
具体的问题大家把代码拷贝运行了看一下。我在右栏放了iframe指向google是为了模拟页面有很多内容。<html>
<head>
<title>splitter</title>
<style>
body{
margin: 0px;
padding: 0px;
}
#splitter_container{
width: 100%;
height: 100%;
border: solid red 1px;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#splitter_left_panel{
width: 300px;
height: 100%;
float: left;
border: solid blue 0px;
}
#splitter_bar{
width: 8px;
height: 100%;
float: left;
background-color: #ccc;

}
#splitter_right_panel{
height: 100%;
}

</style>
<script>
/** this is a helper function used to get the dom element specified by id **/
function $(id){return document.getElementById(id);}/** main functionality **/var Splitter = {
container: null,
lPanel: null,
rPanel: null,
bar: null,
  movingBar: null,
lPanelInitWidth: '250px',
lPanelMaxWidth: '500px', 
lPanelMinWidth: '200px',
rPanelInitWidth: '800px',
rPanelMaxWidth: '999px',
rPanelMinWidth: '500px',
init: function(config){
if(!config.id){
alert('Can not initialize splitter1.');
return;
}
if($(config.id)){
this.container = $(config.id);
if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
alert('Can not initialize splitter2.');
return;
}
else{
this.lPanel = $('splitter_left_panel');
this.rPanel = $('splitter_right_panel');
this.bar = $('splitter_bar');
}
}

if(config.lPanelMaxWidth){
this.lPanelMaxWidth = config.lPanelMaxWidth;
}
if(config.lPanelMinWidth){
this.lPanelMinWidth = config.lPanelMinWidth;
}
if(config.rPanelMaxWidth){
this.rPanelMaxWidth = config.rPanelMaxWidth;
}
if(config.rPanelMinWidth){
this.rPanelMinWidth = config.rPanelMinWidth;
}
if(config.lPanelInitWidth){
this.lPanelInitWidth = config.lPanelInitWidth;
}
if(config.rPanelInitWidth){
this.rPanelInitWidth = config.rPanelInitWidth;
}
this.bar.onmousedown = Splitter.start;
},
start: function(){
var o = Splitter.container;
o.lastMouseX = event.x;
document.body.style.cursor = 'col-resize';
var movingBar = document.createElement('div');
Splitter.container.appendChild(movingBar);
with(movingBar.style){
position = 'absolute';
left = Splitter.bar.offsetLeft + 'px';
top = '0px';
status = 'left: ' + left;
width = Splitter.bar.currentStyle.width;
height = '100%';
backgroundColor = 'blue';
zIndex = 999;
cursor = 'col-resize';
}
movingBar.dx = 0;
Splitter.movingBar = movingBar;
document.onmousemove = Splitter.move;
document.onmouseup = Splitter.end;
},
move: function(){
var o = Splitter.container;
var dx = event.x - o.lastMouseX;
Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
var left = parseInt(Splitter.movingBar.style.left) + dx;
Splitter.movingBar.style.left = left;
o.lastMouseX = event.x;
},
end: function(){
document.onmousemove = null;
document.onmouseup = null;
var dx = Splitter.movingBar.dx;
status = 'dx:' + dx;
Splitter.container.removeChild(Splitter.movingBar);
status = "lPanel.currentStyle.width: " + Splitter.lPanel.currentStyle.width;
Splitter.lPanel.style.width = parseInt(Splitter.lPanel.currentStyle.width) + dx;
document.body.style.cursor = 'default';
}
};
</script>
</head>
<body onload="Splitter.init({id: 'splitter_Container'});">
<div id="splitter_container">
<div id="splitter_left_panel">left</div>
<div id="splitter_bar"></div>
<div id="splitter_right_panel">
<iframe frameborder="0" height="100%" id="" width="100%" scrolling="auto" src="http://www.google.cn"></iframe></div>
</div>
</body>
</html>

解决方案 »

  1.   

    只是在ie6吗？？？？
    试试 setCapture()与releaseCapture()
    <html>
            <head>
                    <title>splitter</title>
                    <style>
    body{
            margin: 0px;
            padding: 0px;
    }
    #splitter_container{
            width: 100%;
            height: 100%;
            border: solid red 1px;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
    }
    #splitter_left_panel{
            width: 300px;
            height: 100%;
            float: left;
            border: solid blue 0px;
    }
    #splitter_bar{
            width: 8px;
            height: 100%;
            float: left;
            background-color: #ccc;
            
    }
    #splitter_right_panel{
            height: 100%;
    }
                            
                    </style>
                    <script>
    /** this is a helper function used to get the dom element specified by id **/
    function $(id){return document.getElementById(id);}/** main functionality **/var Splitter = {
        container: null,
        lPanel: null,
        rPanel: null,
        bar: null,
      movingBar: null,
        lPanelInitWidth: '250px',
        lPanelMaxWidth: '500px', 
        lPanelMinWidth: '200px',
        rPanelInitWidth: '800px',
        rPanelMaxWidth: '999px',
        rPanelMinWidth: '500px',
        init: function(config){
                if(!config.id){
                        alert('Can not initialize splitter1.');
                        return;
                }
                if($(config.id)){
                        this.container = $(config.id);
                        if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
                                alert('Can not initialize splitter2.');
                                return;
                        }
                        else{
                                this.lPanel = $('splitter_left_panel');
                                this.rPanel = $('splitter_right_panel');
                                this.bar = $('splitter_bar');
                        }
                }
                
                if(config.lPanelMaxWidth){
                        this.lPanelMaxWidth = config.lPanelMaxWidth;
                }
                if(config.lPanelMinWidth){
                        this.lPanelMinWidth = config.lPanelMinWidth;
                }
                if(config.rPanelMaxWidth){
                        this.rPanelMaxWidth = config.rPanelMaxWidth;
                }
                if(config.rPanelMinWidth){
                        this.rPanelMinWidth = config.rPanelMinWidth;
                }
                if(config.lPanelInitWidth){
                        this.lPanelInitWidth = config.lPanelInitWidth;
                }
                if(config.rPanelInitWidth){
                        this.rPanelInitWidth = config.rPanelInitWidth;
                }
                this.bar.onmousedown = Splitter.start;
        },
        start: function(){
                var o = Splitter.container;
                o.lastMouseX = event.x;
                document.body.style.cursor = 'col-resize';
                var movingBar = document.createElement('div');
                Splitter.container.appendChild(movingBar);
                with(movingBar.style){
                        position = 'absolute';
                        left = Splitter.bar.offsetLeft + 'px';
                        top = '0px';
                        status = 'left: ' + left;
                        width = Splitter.bar.currentStyle.width;
                        height = '100%';
                        backgroundColor = 'blue';
                        zIndex = 999;
                        cursor = 'col-resize';
                }
    Splitter.container.setCapture();
                movingBar.dx = 0;
                Splitter.movingBar = movingBar;
                document.onmousemove = Splitter.move;
                document.onmouseup = Splitter.end;
        },
        move: function(){
    document.selection.empty();
                var o = Splitter.container;
                var dx = event.x - o.lastMouseX;
                Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
                var left = parseInt(Splitter.movingBar.style.left) + dx;
                Splitter.movingBar.style.left = left;
                o.lastMouseX = event.x;
        },
        end: function(){
    Splitter.container.releaseCapture();
                document.onmousemove = null;
                document.onmouseup = null;
                var dx = Splitter.movingBar.dx;
                status = 'dx:' + dx;
                Splitter.container.removeChild(Splitter.movingBar);
                status = "lPanel.currentStyle.width: " + Splitter.lPanel.currentStyle.width;
                Splitter.lPanel.style.width = parseInt(Splitter.lPanel.currentStyle.width) + dx;
                document.body.style.cursor = 'default';
        }
    };
                    </script>
            </head>
            <body onload="Splitter.init({id: 'splitter_Container'});">
                    <div id="splitter_container">
                            <div id="splitter_left_panel">left</div>
                            <div id="splitter_bar"></div>
                            <div id="splitter_right_panel">
                            <iframe frameborder="0" height="100%" id="" width="100%" scrolling="auto" src="http://www.google.cn"></iframe></div>
                    </div>
            </body>
    </html>
      

  2.   

    对， 就是你描述的这个问题。我初步推测是因为：我开始给最外面的document附加了onmousemove, 使用了iframe之后， 鼠标经过iframe里面的的时候，document.onmousemove失效了。页面有两个document造成的。
      

  3.   

    是只有ie环境 ，但是我没有用过setCapture, 不知道你可不可以修改一下让我看看。
      

  4.   

    因为.右边的frame不算你的Splitter.movingBar.style.left测试代码<html>
        <head>
            <title>splitter</title>
            <style>
                body{
                    margin: 0px;
                    padding: 0px;
                }
                #splitter_container{
                    width: 100%;
                    height: 100%;
                    border: solid red 1px;
                    margin: 0px;
                    padding: 0px;
                    overflow: hidden;
                }
                #splitter_left_panel{
                    width: 300px;
                    height: 100%;
                    float: left;
                    border: solid blue 0px;
                }
                #splitter_bar{
                    width: 8px;
                    height: 100%;
                    float: left;
                    background-color: #ccc;            }
                #splitter_right_panel{
                    height: 100%;
                }        </style>
            <script>
                /** this is a helper function used to get the dom element specified by id **/
                function $(id){return document.getElementById(id);}            /** main functionality **/            var Splitter = {
                    mouseIn:false,
                    container: null,
                    lPanel: null,
                    rPanel: null,
                    bar: null,
                    movingBar: null,
                    lPanelInitWidth: '250px',
                    lPanelMaxWidth: '500px',
                    lPanelMinWidth: '200px',
                    rPanelInitWidth: '800px',
                    rPanelMaxWidth: '999px',
                    rPanelMinWidth: '500px',
                    init: function(config){
                        if(!config.id){
                            alert('Can not initialize splitter1.');
                            return;
                        }
                        if($(config.id)){
                            this.container = $(config.id);
                            if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
                                alert('Can not initialize splitter2.');
                                return;
                            }
                            else{
                                this.lPanel = $('splitter_left_panel');
                                this.rPanel = $('splitter_right_panel');
                                this.bar = $('splitter_bar');
                            }
                        }
                
                        if(config.lPanelMaxWidth){
                            this.lPanelMaxWidth = config.lPanelMaxWidth;
                        }
                        if(config.lPanelMinWidth){
                            this.lPanelMinWidth = config.lPanelMinWidth;
                        }
                        if(config.rPanelMaxWidth){
                            this.rPanelMaxWidth = config.rPanelMaxWidth;
                        }
                        if(config.rPanelMinWidth){
                            this.rPanelMinWidth = config.rPanelMinWidth;
                        }
                        if(config.lPanelInitWidth){
                            this.lPanelInitWidth = config.lPanelInitWidth;
                        }
                        if(config.rPanelInitWidth){
                            this.rPanelInitWidth = config.rPanelInitWidth;
                        }
                        this.bar.onmousedown = Splitter.start;
                    },
                    start: function(){
                        var o = Splitter.container;
                        o.lastMouseX = event.x;
                        document.body.style.cursor = 'col-resize';
                        var movingBar = document.createElement('div');
                        Splitter.container.appendChild(movingBar);
                        with(movingBar.style){
                            position = 'absolute';
                            left = Splitter.bar.offsetLeft + 'px';
                            top = '0px';
                            status = 'left: ' + left;
                            width = Splitter.bar.currentStyle.width;
                            height = '100%';
                            backgroundColor = 'blue';
                            zIndex = 999;
                            cursor = 'col-resize';
                        }
                        movingBar.dx = 0;
                        Splitter.movingBar = movingBar;
                        document.onmousemove = Splitter.move;
                        document.onmouseup = Splitter.end;
                        document.onmousedown=Splitter.readyToMove;
                    },
                    move: function(){
                        if(Splitter.mouseIn){
                            var o = Splitter.container;
                            var dx = event.x - o.lastMouseX;
                            Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
                            var left = parseInt(Splitter.movingBar.style.left) + dx;     
                            Splitter.movingBar.style.left = left;
                            alert(left)
                            o.lastMouseX = event.x;
                        }
                
                    },
                    end: function(){
                        Splitter.mouseIn=true;
                        // document.onmousemove = null;
                        //document.onmouseup = null;
                        var dx = Splitter.movingBar.dx;
                        status = 'dx:' + dx;
                        Splitter.container.removeChild(Splitter.movingBar);
                        status = "lPanel.currentStyle.width: " + Splitter.lPanel.currentStyle.width;
                        Splitter.lPanel.style.width = parseInt(Splitter.lPanel.currentStyle.width) + dx;
                        document.body.style.cursor = 'default';
                    },
                    readyToMove:function(){
                        Splitter.mouseIn=true;
                    }
                };
            </script>
        </head>
        <body onload="Splitter.init({id: 'splitter_Container'});">
            <div id="splitter_container">
                <div id="splitter_left_panel">left</div>
                <div id="splitter_bar"></div>
                <div id="splitter_right_panel">
                    <iframe frameborder="0" height="100%" id="" width="100%" scrolling="auto" src="http://www.google.cn"></iframe></div>
            </div>
        </body>
    </html>
      

  5.   

    说错了.不是不算你的 Splitter.movingBar.style.left  是没接收到event.x这个事件,改变下层就OK
      

  6.   

    有一个横向splitter,LZ参考一下<html>
    <head>
    <script language="javascript">
    <!--
    var bInDrag = false;
    var iSplitHeight = 20;
    var iBrowserHeight = 400;
     
    function initDrag(obj) {
    bInDrag = true;
    obj.setCapture();
    }
     
    function freeDrag(obj) {
    bInDrag = false;
    obj.releaseCapture();
    }
     
    function doDrag() {
    var iMoveHeight = 0;
    if (bInDrag) {
    iMoveHeight = event.clientY - document.getElementById('splitLine').style.pixelTop;
    document.getElementById('head').style.pixelHeight += iMoveHeight;
    document.getElementById('splitLine').style.pixelTop = document.getElementById('head').style.pixelHeight + (iSplitHeight/2);
    document.getElementById('foot').style.pixelTop += iMoveHeight;
    document.getElementById('foot').style.pixelHeight = iBrowserHeight - document.getElementById('foot').style.pixelTop;
    }
    }
    -->
    </script>
    <style type="text/css">
    <!--
    body {
    margin-left: 0px; margin-top: 0px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="head" style="overflow:auto; height:100">top</div>
     
    <div id="splitLine" height="20">
    <hr onmousedown="initDrag(this);" onmouseup="freeDrag(this);" onmousemove="doDrag();" style="cursor:row-resize" color="#c6d7ff" noShade size="5">
    </div>
     
    <div id="foot" style="overflow:auto; height:300">
    <iframe frameborder="0" height="100%" id="" width="100%" scrolling="auto" src="http://www.google.cn"></iframe>
    </div>
    </body>
    </html>
      

  7.   

    你分析的对， 问题我已经解决了。我的解决方法是：当开始移动中间的分隔符的时候， 创造一个透明遮盖层，这个遮盖层的zIndex比document里面的iframe所在的div大， 但是比分隔符要小。移动完毕之后遮盖层消失。没想到一个小小的效果还有这么多门道。
    我先不揭帖，等着更好的回答。
      

  8.   

    其实我想说在ff下可以这么实现的  可是你已经说了你说那个还是一样的  是来什么ie几测试的
    我测试不出来你说的现象.....我是ie6!~
      

  9.   

    贴我的代码：<html>
    <head>
    <title>splitter</title>
    <style>
    body{
    margin: 0px;
    padding: 0px;
    }
    #splitter_container{
    width: 100%;
    height: 100%;
    border: solid red 1px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    #splitter_left_panel{
    width: 300px;
    height: 100%;
    float: left;
    border: solid blue 0px;
    }
    #splitter_bar{
    width: 8px;
    height: 100%;
    float: left;
    background-color: #ccc;

    }
    #splitter_right_panel{
    height: 100%;
    }

    </style>
    <script>
    /** this is a helper function used to get the dom element specified by id **/
    function $(id){return document.getElementById(id);}/** main functionality **/var Splitter = {
    container: null,
    lPanel: null,
    rPanel: null,
    bar: null,
      movingBar: null,
    lPanelInitWidth: '250px',
    lPanelMaxWidth: '500px', 
    lPanelMinWidth: '200px',
    rPanelInitWidth: '800px',
    rPanelMaxWidth: '999px',
    rPanelMinWidth: '500px',
    init: function(config){
    if(!config.id){
    alert('Can not initialize splitter1.');
    return;
    }
    if($(config.id)){
    this.container = $(config.id);
    if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
    alert('Can not initialize splitter2.');
    return;
    }
    else{
    this.lPanel = $('splitter_left_panel');
    this.rPanel = $('splitter_right_panel');
    this.bar = $('splitter_bar');
    }
    }

    if(config.lPanelMaxWidth){
    this.lPanelMaxWidth = config.lPanelMaxWidth;
    }
    if(config.lPanelMinWidth){
    this.lPanelMinWidth = config.lPanelMinWidth;
    }
    if(config.rPanelMaxWidth){
    this.rPanelMaxWidth = config.rPanelMaxWidth;
    }
    if(config.rPanelMinWidth){
    this.rPanelMinWidth = config.rPanelMinWidth;
    }
    if(config.lPanelInitWidth){
    this.lPanelInitWidth = config.lPanelInitWidth;
    }
    if(config.rPanelInitWidth){
    this.rPanelInitWidth = config.rPanelInitWidth;
    }
    var mask = document.createElement('div');
    document.body.appendChild(mask);
    with(mask.style){
    position = 'absolute';
    left = '0px';
    top = '0px';
    zIndex = 900;
    width = '100%';
    height = '100%';
    //backgroundColor = 'green';
    }
    mask.style.display = 'none';
    Splitter.mask = mask;
    this.bar.onmousedown = Splitter.start;
    },
    start: function(){
    var o = Splitter.container;
    o.lastMouseX = event.x;
    Splitter.mask.style.display = '';

    var movingBar = document.createElement('div');
    Splitter.container.appendChild(movingBar);
    with(movingBar.style){
    position = 'absolute';
    left = Splitter.bar.offsetLeft + 'px';
    top = '0px';
    status = 'left: ' + left;
    width = Splitter.bar.currentStyle.width;
    height = '100%';
    backgroundColor = 'blue';
    zIndex = 999;
    cursor = 'col-resize';
    }
    movingBar.dx = 0;
    Splitter.movingBar = movingBar;
    document.onmousemove = Splitter.move;
    document.onmouseup = Splitter.end;

    },
    move: function(){
    var o = Splitter.container;
    var dx = event.x - o.lastMouseX;
    status = new Date();
    Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
    var left = parseInt(Splitter.movingBar.style.left) + dx;
    Splitter.movingBar.style.left = left;
    o.lastMouseX = event.x;
    },
    end: function(){
    document.onmousemove = null;
    document.onmouseup = null;
    Splitter.mask.style.display = 'none';
    var dx = Splitter.movingBar.dx;
    status = 'dx:' + dx;
    Splitter.container.removeChild(Splitter.movingBar);
    status = "lPanel.currentStyle.width: " + Splitter.lPanel.currentStyle.width;
    Splitter.lPanel.style.width = parseInt(Splitter.lPanel.currentStyle.width) + dx;
    document.body.style.cursor = 'default';
    //document.body.removeChild(Splitter.mask);
    }
    };
    </script>
    </head>
    <body onload="Splitter.init({id: 'splitter_Container'});">
    <div id="splitter_container">
    <div id="splitter_left_panel">left</div>
    <div id="splitter_bar"></div>
    <div id="splitter_right_panel">
    <iframe frameborder="0" height="100%" id="" width="100%" src="http://www.google.cn"></iframe>
    </div>
    </div>
    </body>
    </html>
      

  10.   

    其实这个问题主要原因是 Iframe下没有onmouseover事件 监测不到丢失了 变个招放个DIV覆盖下就可以了<html>
            <head>
                    <title>splitter</title>
                    <style>
    body{
            margin: 0px;
            padding: 0px;
    }
    #splitter_container{
            width: 100%;
            height: 100%;
            border: solid red 1px;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
    }
    #splitter_left_panel{
            width: 300px;
            height: 100%;
            float: left;
            border: solid blue 0px;
    }
    #splitter_bar{
            width: 8px;
            height: 100%;
            float: left;
            background-color: #ccc;
            
    }
    #splitter_right_panel{
            height: 100%;
    }
                            
                    </style>
                    <script>
    /** this is a helper function used to get the dom element specified by id **/
    function $(id){return document.getElementById(id);}/** main functionality **/var Splitter = {
        container: null,
        lPanel: null,
        rPanel: null,
        bar: null,
      movingBar: null,
        lPanelInitWidth: '250px',
        lPanelMaxWidth: '500px', 
        lPanelMinWidth: '200px',
        rPanelInitWidth: '800px',
        rPanelMaxWidth: '999px',
        rPanelMinWidth: '500px',
        init: function(config){
                if(!config.id){
                        alert('Can not initialize splitter1.');
                        return;
                }
                if($(config.id)){
                        this.container = $(config.id);
                        if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
                                alert('Can not initialize splitter2.');
                                return;
                        }
                        else{
                                this.lPanel = $('splitter_left_panel');
                                this.rPanel = $('splitter_right_panel');
                                this.bar = $('splitter_bar');
                        }
                }
                
                if(config.lPanelMaxWidth){
                        this.lPanelMaxWidth = config.lPanelMaxWidth;
                }
                if(config.lPanelMinWidth){
                        this.lPanelMinWidth = config.lPanelMinWidth;
                }
                if(config.rPanelMaxWidth){
                        this.rPanelMaxWidth = config.rPanelMaxWidth;
                }
                if(config.rPanelMinWidth){
                        this.rPanelMinWidth = config.rPanelMinWidth;
                }
                if(config.lPanelInitWidth){
                        this.lPanelInitWidth = config.lPanelInitWidth;
                }
                if(config.rPanelInitWidth){
                        this.rPanelInitWidth = config.rPanelInitWidth;
                }
                var mask = document.createElement('div');
                document.body.appendChild(mask);
                with(mask.style){
                        position = 'absolute';
                        left = '0px';
                        top = '0px';
                        zIndex = 900;
                        width = '100%';
                        height = '100%';
                        //backgroundColor = 'green';
                }
                mask.style.display = 'none';
                Splitter.mask = mask;
                this.bar.onmousedown = Splitter.start;
        },
        start: function(){
                var o = Splitter.container;
                o.lastMouseX = event.x;
                Splitter.mask.style.display = '';
                
                var movingBar = document.createElement('div');
                Splitter.container.appendChild(movingBar);
                with(movingBar.style){
                        position = 'absolute';
                        left = Splitter.bar.offsetLeft + 'px';
                        top = '0px';
                        status = 'left: ' + left;
                        width = Splitter.bar.currentStyle.width;
                        height = '100%';
                        backgroundColor = 'blue';
                        zIndex = 999;
                        cursor = 'col-resize';
                }
                movingBar.dx = 0;
                Splitter.movingBar = movingBar;
                document.onmousemove = Splitter.move;
                document.onmouseup = Splitter.end;
                
        },
        move: function(){
                var o = Splitter.container;
                var dx = event.x - o.lastMouseX;
                status = new Date();
                Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
                var left = parseInt(Splitter.movingBar.style.left) + dx;
                Splitter.movingBar.style.left = left;
                o.lastMouseX = event.x;
        },
        end: function(){
                document.onmousemove = null;
                document.onmouseup = null;
                Splitter.mask.style.display = 'none';
                var dx = Splitter.movingBar.dx;
                status = 'dx:' + dx;
                Splitter.container.removeChild(Splitter.movingBar);
                status = "lPanel.currentStyle.width: " + Splitter.lPanel.currentStyle.width;
                Splitter.lPanel.style.width = parseInt(Splitter.lPanel.currentStyle.width) + dx;
                document.body.style.cursor = 'default';
                //document.body.removeChild(Splitter.mask);
        }
    };
                    </script>
            </head>
            <body onload="Splitter.init({id: 'splitter_Container'});">
                    <div id="splitter_container">
                            <div id="splitter_left_panel">left</div>
                            <div id="splitter_bar"></div>

                            <div id="splitter_right_panel" style="background-color:red">
    <div style="width:100%;height:100%;z-index:1000;position:absolute"></div>
                                    <iframe frameborder="0" height="100%" id="" width="100%" src="http://www.google.cn"></iframe>
                            </div>
                    </div>
            </body>
    </html>
    我只在IE8下测了 
      

  11.   

    楼主,不知道你的左边CSS有没有设置好页面按比例缩小放大,只有这样才行的
      

  12.   

    这样看能明显点<html>
            <head>
                    <title>splitter</title>
                    <style>
    body{
            margin: 0px;
            padding: 0px;
    }
    #splitter_container{
            width: 100%;
            height: 100%;
            border: solid red 1px;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
    }
    #splitter_left_panel{
            width: 300px;
            height: 100%;
            float: left;
            border: solid blue 0px;
    }
    #splitter_bar{
            width: 8px;
            height: 100%;
            float: left;
            background-color: #ccc;
            
    }
    #splitter_right_panel{
            height: 100%;
    }
                            
                    </style>
                    <script>
    /** this is a helper function used to get the dom element specified by id **/
    function $(id){return document.getElementById(id);}/** main functionality **/var Splitter = {
        container: null,
        lPanel: null,
        rPanel: null,
        bar: null,
      movingBar: null,
        lPanelInitWidth: '250px',
        lPanelMaxWidth: '500px', 
        lPanelMinWidth: '200px',
        rPanelInitWidth: '800px',
        rPanelMaxWidth: '999px',
        rPanelMinWidth: '500px',
        init: function(config){
                if(!config.id){
                        alert('Can not initialize splitter1.');
                        return;
                }
                if($(config.id)){
                        this.container = $(config.id);
                        if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
                                alert('Can not initialize splitter2.');
                                return;
                        }
                        else{
                                this.lPanel = $('splitter_left_panel');
                                this.rPanel = $('splitter_right_panel');
                                this.bar = $('splitter_bar');
                        }
                }
                
                if(config.lPanelMaxWidth){
                        this.lPanelMaxWidth = config.lPanelMaxWidth;
                }
                if(config.lPanelMinWidth){
                        this.lPanelMinWidth = config.lPanelMinWidth;
                }
                if(config.rPanelMaxWidth){
                        this.rPanelMaxWidth = config.rPanelMaxWidth;
                }
                if(config.rPanelMinWidth){
                        this.rPanelMinWidth = config.rPanelMinWidth;
                }
                if(config.lPanelInitWidth){
                        this.lPanelInitWidth = config.lPanelInitWidth;
                }
                if(config.rPanelInitWidth){
                        this.rPanelInitWidth = config.rPanelInitWidth;
                }
                var mask = document.createElement('div');
                document.body.appendChild(mask);
                with(mask.style){
                        position = 'absolute';
                        left = '0px';
                        top = '0px';
                        zIndex = 900;
                        width = '100%';
                        height = '100%';
                        //backgroundColor = 'green';
                }
                mask.style.display = 'none';
                Splitter.mask = mask;
                this.bar.onmousedown = Splitter.start;
        },
        start: function(){
                var o = Splitter.container;
                o.lastMouseX = event.x;
                Splitter.mask.style.display = '';
                
                var movingBar = document.createElement('div');
                Splitter.container.appendChild(movingBar);
                with(movingBar.style){
                        position = 'absolute';
                        left = Splitter.bar.offsetLeft + 'px';
                        top = '0px';
                        status = 'left: ' + left;
                        width = Splitter.bar.currentStyle.width;
                        height = '100%';
                        backgroundColor = 'blue';
                        zIndex = 999;
                        cursor = 'col-resize';
                }
                movingBar.dx = 0;
                Splitter.movingBar = movingBar;
                document.onmousemove = Splitter.move;
                document.onmouseup = Splitter.end;
                
        },
        move: function(){
                var o = Splitter.container;
                var dx = event.x - o.lastMouseX;
                status = new Date();
                Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
                var left = parseInt(Splitter.movingBar.style.left) + dx;
                Splitter.movingBar.style.left = left;
                o.lastMouseX = event.x;
        },
        end: function(){
                document.onmousemove = null;
                document.onmouseup = null;
                Splitter.mask.style.display = 'none';
                var dx = Splitter.movingBar.dx;
                status = 'dx:' + dx;
                Splitter.container.removeChild(Splitter.movingBar);
                status = "lPanel.currentStyle.width: " + Splitter.lPanel.currentStyle.width;
                Splitter.lPanel.style.width = parseInt(Splitter.lPanel.currentStyle.width) + dx;
                document.body.style.cursor = 'default';
                //document.body.removeChild(Splitter.mask);
        }
    };
                    </script>
            </head>
            <body onload="Splitter.init({id: 'splitter_Container'});">
                    <div id="splitter_container">
                            <div id="splitter_left_panel">left</div>
                            <div id="splitter_bar"></div>

                            <div id="splitter_right_panel" style="background-color:red">
    <div style="width:120%;height:120%;z-index:1000;position:absolute;background-color:red;filter:alpha(opacity=60)"></div>
                                    <iframe frameborder="0" height="100%" id="" width="100%" src="http://www.google.cn"></iframe>
                            </div>
                    </div>
            </body>
    </html>
      

  13.   

    把9楼代码改了一下，样式没仔细做
    <html>
    <head>
    <style></style>
    <script language="javascript">
    <!--
    var bInDrag = false;
    function $(id){return document.getElementById(id);}
     
    function initDrag(obj) {
      bInDrag = true;    $('splitLine').style.background="#eee"; obj.setCapture();
    }
     
    function freeDrag(obj) {
      bInDrag = false;  $('splitLine').style.background="#aaa";   obj.releaseCapture();
    }
     
    function doDrag() {
      if (!bInDrag) {return;}
      $('left').style.width=event.clientX<150?150+"px":event.clientX +"px";
      $('splitLine').style.left =$('left').offsetWidth+"px";
    }window.onload=function(){
      var h=document.body.offsetHeight +"px";
      $("left").style.height=h;
      $("splitLine").style.height=h;
      $("right").style.height=h;
    }
    -->
    </script>
    <style type="text/css">
    <!--
    body { margin-left: 0px; margin-top: 0px;}
    #left{overflow:auto; width:220px; height:100%; float:left;}
    #splitLine{overflow:hidden; width:6px; height:100%; border:1px solid #eee ;background:aaa; float:left;cursor:col-resize}
    #right{overflow:auto;  height:100%;float:left}
    -->
    </style>
    </head>
    <body>
    <div id="left">left</div> 
    <div id="splitLine" onmousedown="initDrag(this);" onmouseup="freeDrag(this);" onmousemove="doDrag();"></div>
    <div id="right">
      <iframe frameborder="0" height="100%" id="" width="100%" scrolling="auto" src="http://www.google.cn"></iframe>
    </div>
    </body>
    </html>
      

  14.   

    略微改动版本,不加透明层,不过不能拖动太快<html>
        <head>
            <title>splitter</title>
            <style>
                body{
                    margin: 0px;
                    padding: 0px;
                }
                #splitter_container{
                    width: 100%;
                    height: 100%;
                    border: solid red 1px;
                    margin: 0px;
                    padding: 0px;
                    overflow: hidden;
                }
                #splitter_left_panel{
                    width: 300px;
                    height: 100%;
                    float: left;
                    border: solid blue 0px;
                }
                #splitter_bar{
                    width: 8px;
                    height: 100%;
                    float: left;
                    background-color: #ccc;            }
                #splitter_right_panel{
                    height: 100%;
                }        </style>
            <script>            /** this is a helper function used to get the dom element specified by id **/
                function $(id){return document.getElementById(id);}            /** main functionality **/            var Splitter = {
                    container: null,
                    lPanel: null,
                    rPanel: null,
                    bar: null,
                    movingBar: null,
                    lPanelInitWidth: '250px',
                    lPanelMaxWidth: '500px',
                    lPanelMinWidth: '200px',
                    rPanelInitWidth: '800px',
                    rPanelMaxWidth: '999px',
                    rPanelMinWidth: '500px',
                    init: function(config){
                        if(!config.id){
                            alert('Can not initialize splitter1.');
                            return;
                        }
                        if($(config.id)){
                            this.container = $(config.id);
                            if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
                                alert('Can not initialize splitter2.');
                                return;
                            }
                            else{
                                this.lPanel = $('splitter_left_panel');
                                this.rPanel = $('splitter_right_panel');
                                this.bar = $('splitter_bar');
                            }
                        }
                
                        if(config.lPanelMaxWidth){
                            this.lPanelMaxWidth = config.lPanelMaxWidth;
                        }
                        if(config.lPanelMinWidth){
                            this.lPanelMinWidth = config.lPanelMinWidth;
                        }
                        if(config.rPanelMaxWidth){
                            this.rPanelMaxWidth = config.rPanelMaxWidth;
                        }
                        if(config.rPanelMinWidth){
                            this.rPanelMinWidth = config.rPanelMinWidth;
                        }
                        if(config.lPanelInitWidth){
                            this.lPanelInitWidth = config.lPanelInitWidth;
                        }
                        if(config.rPanelInitWidth){
                            this.rPanelInitWidth = config.rPanelInitWidth;
                        }
                        this.bar.onmousedown = Splitter.start;
                    },
                    start: function(){
                        var o = Splitter.container;
                        o.lastMouseX = event.x;
                        document.body.style.cursor = 'col-resize';
                        var movingBar = document.createElement('div');
                        Splitter.container.appendChild(movingBar);
                        with(movingBar.style){
                            position = 'absolute';
                            left = Splitter.bar.offsetLeft + 'px';
                            top = '0px';
                            status = 'left: ' + left;
                            width = Splitter.bar.currentStyle.width;
                            height = '100%';
                            backgroundColor = 'blue';
                            zIndex = 999;
                            cursor = 'col-resize';
                        }
                        movingBar.dx = 0;
                        Splitter.movingBar = movingBar;
                        document.onmousemove = Splitter.move;
                        document.onmouseup = Splitter.end;
                        document.onmouseout=Splitter.out;
                    },
                    move: function(){
                        var o = Splitter.container;
                        var dx = event.x - o.lastMouseX;
                        Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
                        var left = parseInt(Splitter.movingBar.style.left) + dx;                 
                        Splitter.movingBar.style.left = left;
                        o.lastMouseX = event.x;
                    },
                    end: function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                        document.onmouseout=null;
                        var dx = Splitter.movingBar.dx;
                        status = 'dx:' + dx;
                        Splitter.container.removeChild(Splitter.movingBar);
                        status = "lPanel.currentStyle.width: " + Splitter.lPanel.currentStyle.width;
                        Splitter.lPanel.style.width = parseInt(Splitter.lPanel.currentStyle.width) + dx;
                        document.body.style.cursor = 'default';
                    },
                    out:function(){                        var wide=parseInt(Splitter.bar.currentStyle.width);
                            var o = Splitter.container;
                            var dx = event.x - o.lastMouseX+wide;
                            Splitter.movingBar.dx = Splitter.movingBar.dx + dx;
                            var left = parseInt(Splitter.movingBar.style.left) + dx;
                            Splitter.movingBar.style.left = left;
                            o.lastMouseX = event.x+wide;
                        
                    }
                };        </script>
        </head>
        <body onload="Splitter.init({id: 'splitter_Container'});">
            <div id="splitter_container" >
                <div id="splitter_left_panel">left</div>
                <div id="splitter_bar"></div>
                <div id="splitter_right_panel">
                    <iframe frameborder="0" height="100%" id="" width="100%" scrolling="auto" src="http://www.google.cn"></iframe></div>
            </div>
        </body>
    </html>
    继续改进中
      

  15.   

    完全的代码和注释在：http://blog.csdn.net/sunxing007/archive/2009/08/28/4492453.aspx