效果演示：http://www.gbtags.com/gb/rtreplayerpreview/569.htm
HTML：
<h4>鼠标移动到矩形分割线</h4>
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.gbtags.com/jqueryui/1.10.4/jquery-ui.min.js"></script>JS：
$(function ()
{
$(".resizable1").resizable(
{
autoHide: true,
handles: 'e',
resize: function(e, ui)
{
var parent = ui.element.parent();
var remainingSpace = parent.width() - ui.element.outerWidth(),
divTwo = ui.element.next(),
divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
divTwo.width(divTwoWidth);
},
stop: function(e, ui)
{
var parent = ui.element.parent();
ui.element.css(
{
width: ui.element.width()/parent.width()*100+"%",
});
}
});
});
CSS：
@import url('http://cdn.gbtags.com/jqueryui/1.10.4/css/jquery-ui.min.css');
*{
font-family: 'microsoft yahei',Arial,sans-serif;
}
.wrap {
width: 100%;
border: 1px solid #999;
font-size: 0;
}
h4{
font-weight: normal;
}
.resizable {
width: 50%;
height: 120px;
padding: 0.5em;
background-color: orange;
display: inline-block;
}
.resizable2 {
background-color: #08a3ca;
}
.ui-resizable-e {
cursor: e-resize;
width: 16px;
right: -5px;
top: 0;
bottom: 0;
background-color: #666;
}
