模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery
Posted 西北逍遥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>分隔栏动态改变div大小—基于jQuery</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
<meta name="author" content="wind"/>
<meta name="robots" content="index,follow"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style>
*{margin:0;padding:0;}
ul,ol,li{list-style: none;}
#hj_wrap{width:1200px;height: 250px;margin:10px auto;clear:both;border:1px solid red;overflow: hidden;}
#hj_wrap div{width:200px;float: left;height: 250px;padding:10px;background: #0099EE;overflow: hidden;border:0px solid #0099ff;}
#hj_wrap label{float: left;width: 10px;height: 250px;display:block;cursor: e-resize;}
</style>
</head>
<body>
<div id=‘hj_wrap‘>
<div>左</div>
<label>1</label>
<div>中</div>
<label>2</label>
<div>右</div>
<label>3</label>
<div>右1</div>
<label>4</label>
<div>右2</div>
</div>
<script src="jquery-1.8.0.min.js"></script>
<script>
$(function(){
var leftOffset, inx, nextW2, nextW ,thisObject;
var dragging = false;
var doc = document;
var labBtn = $("#hj_wrap").find(‘label‘);
var wrapWidth = $("#hj_wrap").width();
//定义一个对象
function PointerObject(){
this.el = null;
this.grabx = null;
this.left = null;
this.pointerPosition =0;
this.clickX =0;
}
labBtn.bind(‘mousedown‘,function(e){
dragging = true;
thisObject = new PointerObject();
thisObject.el = this;
thisObject.pointerPosition = $(this).offset().left;
thisObject.clickX = e.pageX;
}
);
doc.onmousemove = function(e){
if (dragging) {
if(thisObject != null){
var changeDistance = 0;
var nextWidth = $(thisObject.el).next().width();
var prevWidth = $(thisObject.el).prev().width();
if(thisObject.clickX>=e.pageX){
//鼠标向左移动
changeDistance = Number(thisObject.clickX)-Number(e.pageX);
if($(thisObject.el).prev().width()-changeDistance<20){
}else{
$(thisObject.el).prev().width($(thisObject.el).prev().width()-changeDistance);
$(thisObject.el).next().width($(thisObject.el).next().width()+changeDistance);
thisObject.pointerPosition = (thisObject.pointerPosition - changeDistance);
thisObject.clickX=e.pageX;
$(thisObject.el).offset({left:e.pageX-2});
}
}else{
//鼠标向右移动
changeDistance = Number(e.pageX)-Number(thisObject.clickX);
if($(thisObject.el).next().width()-changeDistance<20){
}else{
$(thisObject.el).prev().width($(thisObject.el).prev().width()+changeDistance);
$(thisObject.el).next().width($(thisObject.el).next().width()-changeDistance);
thisObject.pointerPosition = (thisObject.pointerPosition + changeDistance);
thisObject.clickX=e.pageX;
$(thisObject.el).offset({left:e.pageX-2});
}
}
}
}
};
$(doc).mouseup(function(e) {
if (thisObject != null) {
thisObject = null;
}
dragging = false;
e.cancelBubble = true;
})
})
</script>
</div>
</body>
</html>
以上是关于模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery的主要内容，如果未能解决你的问题，请参考以下文章
CSS 基本3列CSS布局（固定宽度，居中，页眉和页脚，内容左右两侧的侧边栏）