<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
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;
}
</style>
<script src="jquery-1.7.1.js"></script>
<script>
$(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");
});
});
</script>
</head>
<body>
<div id="leftDiv">我是左</div>
<div id="splitDiv"></div>
<div id="rightDiv">我是右</div>
</body>
</html>