CSS:
body {
margin:0;
padding:0;
overflow-y:auto;
}
#leftDiv {
width:300px;
height:500px;
border:1px red solid;
border-right:none;
float:left;
}
#splitDiv {
float:left;
width:1px;
height:500px;
border-left:1px blue solid;
}
#rightDiv {
margin:0px;
height:500px;
border:1px solid gray;
}
JS:
$(function() {
$("#splitDiv").mouseover(function(e) {
$(this).css("cursor", "e-resize");
});
$("#splitDiv").mousedown(function(e) {
$(this).css("cursor", "e-resize");
$("body").mousemove(function(eve) {
var _x = eve.pageX;
$("#leftDiv").animate({
width: _x
}, 1);
})
});
$("body").mouseup(function(e) {
$(this).unbind("mousemove");
$(this).css("cursor", "default");
});
});
HTML:
<div id="leftDiv">我是左</div>
<div id="splitDiv"></div>
<div id="rightDiv">我是右</div>
效果: