左右布局，中分线可以左右拖动
cursor有很多形状
在中线附近变为向左 向右鼠标，通过mousemove来实现，要不断地计算。
通过jquery实现，比较简单一些，用原生的js太复杂了。
<!DOCTYPE html>
<html>
<head>
<title>bar index</title>
<style>
.con{
width:1000px;
border:1px solid black;
height:100px;
}
.right{
width:70%;
height:100px;
float:left;
background:olive;
}
#keleyi{
float:left;
width:30%;
height:100px;
background:#f1f1f1;
text-align:center;
line-height:16px;
cursor: default;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>内容</p>
<div class='con'>
<div id="keleyi">
</div>
<div class='right' id='right'></div>
</div>
<script type="text/javascript" src="js/jquery/jquery-2.1.4.js"></script>
<script>
$(function () {
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('kel'+'eyi'));
});
$('#keleyi').unbind().bind('mousemove', function(e){
var xPos = e.offsetX;
var yPos = e.offsetY;
var offset = 18;
if(xPos > ($('#keleyi').offset().left+$('#keleyi').width())-offset){
$(this).css('cursor', 'move');
}else{
$(this).css('cursor', 'default');
}
});
function bindResize(el) {
//初始化参数
var els = el.style,
//鼠标的 X 和 Y 轴坐标
x = y = 0;
//邪恶的食指
$(el).mousedown(function (e) {
//按下元素后，计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth,
y = e.clientY - el.offsetHeight;
//在支持 setCapture 做些东东
el.setCapture ? (
//捕捉焦点
el.setCapture(),
//设置事件
el.onmousemove = function (ev) {
mouseMove(ev || event)
},
el.onmouseup = mouseUp
) : (
//绑定事件
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
)
//防止默认事件发生
e.preventDefault()
});
//移动事件
function mouseMove(e) {
//宇宙超级无敌运算中...
els.width = e.clientX - x + 'px';
$('#right').width(1000-(+els.width.replace('px', '')));
}
//停止事件
function mouseUp() {
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
)
}
}
</script>
</body>
</html>
