js实现两个并列的div大小动态改变

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)
			)
		}
	}

参考原文

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值