js实现两个并列的div大小动态改变
原创
©著作权归作者所有:来自51CTO博客作者yangshanyang的原创作品,请联系作者获取转载授权,否则将追究法律责任
HTML代码
<div class="modal-body"
style="width:100%; overflow: auto;margin: 0;">
<div id="main" class="col-xs-12">
<div id="menu" class="col-xs-6"
style="border: 1px solid #ccc; height: 400px; overflow: scroll;">
</div>
<div id="codecontainer" class="col-xs-6"
style="border: 1px solid #ccc; height: 400px; overflow: scroll;">
</div>
</div>
</div>
JS代码
$(function(){
var o = document.getElementById("main");
main = o.clientWidth||o.offsetWidth;
o2 = document.getElementById("codecontainer");
var codecontainer = o2.clientWidth||o2.offsetWidth;
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('menu'));
});
$(function(){
var o = document.getElementById("main");
main = o.clientWidth||o.offsetWidth;
o2 = document.getElementById("codecontainer");
var codecontainer = o2.clientWidth||o2.offsetWidth;
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('menu'));
});
function bindResize(el) {
//初始化参数
var els = el.style,
//鼠标的 X 轴坐标
x =0;
//按下鼠标
$(el).mousedown(function (e) {
//按下元素后,计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth,
//在支持 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) {
//运算中...
var elsWidth = e.clientX - x;
if (elsWidth > 800){
elsWidth =800;
}
if (elsWidth < 400){
elsWidth =400;
}
els.width = elsWidth + 'px';
var rightWidth =main-elsWidth-31;
o2.style.width = rightWidth + 'px';
}
//停止事件
function mouseUp() {
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
)
}
}
参考原文