由jQuery实现上下、左右动态改变左右、上下两个div的大小，需要自己引入jquery1.8.0.min.js包

可用于页面布局。

//============================index.html======================================

<!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>
.hj-wrap{
width:100%;
height: 200px;
margin:10px auto;
clear:both;
border:1px solid red;
overflow: hidden;
}
.hj-transverse-split-div{
float: left;
height: 100%;
padding:0px;
background: #0099EE;
overflow: hidden;
border:0px solid #0099ff;
}
.hj-wrap .hj-transverse-split-label{
float:left;
width: 10px;
height: 100%;
display:block;
cursor: e-resize;
background-color:#fff;
}
table tr td{
border:1px solid #fff;
}
.hj-vertical-split-div{
height:150px;
border:0px solid red;
width:99.9%;
margin:0 auto;
background-color:#0099ff;
}
.hj-vertical-split-label{
width: 100%;
height: 10px;
display:block;
cursor: n-resize;
background-color:#fff;
}
</style>
</head>
<body>
<div class='hj-wrap'>
<div class="hj-transverse-split-div">
<label>ggg</label>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右1</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右2</div>
</div>

<div class='hj-wrap'>
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右1</div>
</div>

<div class='hj-wrap'>
<div class="hj-transverse-split-div">
<h2>javascript</h2>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">
<table>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td colspan="2">1</td>
</tr>
</table>
</div>
</div>

<div class='hj-wrap' style="height:500px;">
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div" style="background-color:#fff;">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">下</div>
</div>

</div>

<div class='hj-wrap' style="height:500px;">
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div" style="background-color:#fff;">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">下</div>
</div>
</div>

<div class='hj-wrap' style="height:500px;">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">下</div>
</div>

<script src="jquery-1.8.0.min.js"></script>

<script src="monitorSplitWindows.js"></script>
</div>
</body>
</html>

//==================================monitorSplitWindows.js代码=======================================

/**
* name: monitorSplitWindows.js
* route: /static/js/control/ui
* author: luozhubang
* date: 2016-10-26
* function: 监听窗口拖动事件，依赖于/static/js/control/ui/DynamicWindow.js,
* 演示地址：http://www.vfkjsd.cn/div/2/div.html
*/
$(function(){
//alert("ok");
//鼠标横向、竖向操作对象
var thisHorizontalObject,thisVerticalObject;
//文档对象
var doc = document;
//查找横向分割栏
var horizontalLabels = $(".hj-wrap").find('.hj-transverse-split-label');
//查找竖向分割栏
var verticalLabels = $(".hj-wrap").find('.hj-vertical-split-label');

//定义一个对象
function PointerObject(){
this.el = null;//当前鼠标选择的对象
this.clickX =0;//鼠标横向初始位置
this.clickY =0;//鼠标竖向初始位置
this.horizontalDragging=false;//判断鼠标可否横向拖动
this.verticalDragging=false;//判断鼠标可否竖向拖动
}

doc.onmousedown = function(e){
console.log("--mousedown--");
horizontalLabels = $(".hj-wrap").find('.hj-transverse-split-label');
verticalLabels = $(".hj-wrap").find('.hj-vertical-split-label');
//判断窗体个数，并初始化窗体宽度
if($(".hj-wrap").length>0){
for(var i=0;i<$(".hj-wrap").length;i++){
var hjDivNums = $($(".hj-wrap")[i]).children(".hj-transverse-split-div");
var defaultWidth =Math.floor(100/hjDivNums.length);
$($(".hj-wrap")[i]).children(".hj-transverse-split-div").width(defaultWidth-1+"%");
}
}
//横向分隔栏绑定事件
horizontalLabels.bind('mousedown',function(e){
thisHorizontalObject = new PointerObject();
thisHorizontalObject.horizontalDragging = true;//鼠标可横向拖动
thisHorizontalObject.el = this;
thisHorizontalObject.clickX = e.pageX;//记录鼠标横向初始位置
});

//竖向分隔栏绑定事件
verticalLabels.bind('mousedown',function(e){
console.log("----");
thisVerticalObject = new PointerObject();
thisVerticalObject.verticalDragging = true;//鼠标可竖向拖动
thisVerticalObject.el = this;
thisVerticalObject.clickY = e.pageY;//记录鼠标竖向初始位置
});
}

//横向分隔栏绑定事件
horizontalLabels.bind('mousedown',function(e){
thisHorizontalObject = new PointerObject();
thisHorizontalObject.horizontalDragging = true;//鼠标可横向拖动
thisHorizontalObject.el = this;
thisHorizontalObject.clickX = e.pageX;//记录鼠标横向初始位置
});

//竖向分隔栏绑定事件
verticalLabels.bind('mousedown',function(e){
console.log("----");
thisVerticalObject = new PointerObject();
thisVerticalObject.verticalDragging = true;//鼠标可竖向拖动
thisVerticalObject.el = this;
thisVerticalObject.clickY = e.pageY;//记录鼠标竖向初始位置
});

doc.onmousemove = function(e){
//鼠标横向拖动
if(thisHorizontalObject != null){
if (thisHorizontalObject.horizontalDragging) {
var changeDistance = 0;
var nextWidth = $(thisHorizontalObject.el).next().width();
var prevWidth = $(thisHorizontalObject.el).prev().width();
if(thisHorizontalObject.clickX>=e.pageX){
//鼠标向左移动
changeDistance = Number(thisHorizontalObject.clickX)-Number(e.pageX);
if($(thisHorizontalObject.el).prev().width()-changeDistance<20){

}else{
$(thisHorizontalObject.el).prev().width($(thisHorizontalObject.el).prev().width()-changeDistance);
$(thisHorizontalObject.el).next().width($(thisHorizontalObject.el).next().width()+changeDistance);
thisHorizontalObject.clickX=e.pageX;
$(thisHorizontalObject.el).offset({left:e.pageX-4});
}
}else{
//鼠标向右移动
changeDistance = Number(e.pageX)-Number(thisHorizontalObject.clickX);
if($(thisHorizontalObject.el).next().width()-changeDistance<20){

}else{
$(thisHorizontalObject.el).prev().width($(thisHorizontalObject.el).prev().width()+changeDistance);
$(thisHorizontalObject.el).next().width($(thisHorizontalObject.el).next().width()-changeDistance);
thisHorizontalObject.clickX=e.pageX;
$(thisHorizontalObject.el).offset({left:e.pageX-4});
}
}
$(thisHorizontalObject.el).width(10);
}
}
//鼠标竖向拖动
if(thisVerticalObject != null){
if (thisVerticalObject.verticalDragging) {
var changeDistance = 0;
var nextheight = $(thisVerticalObject.el).next().height();
var prevheight = $(thisVerticalObject.el).prev().height();
if(thisVerticalObject.clickY>=e.pageY){
//鼠标向上移动
changeDistance = Number(thisVerticalObject.clickY)-Number(e.pageY);
if($(thisVerticalObject.el).prev().height()-changeDistance<20){

}else{
$(thisVerticalObject.el).prev().height($(thisVerticalObject.el).prev().height()-changeDistance);
$(thisVerticalObject.el).next().height($(thisVerticalObject.el).next().height()+changeDistance);
thisVerticalObject.clickY=e.pageY;
$(thisVerticalObject.el).offset({top:e.pageY-4});
}
}else{
//鼠标向下移动
changeDistance = Number(e.pageY)-Number(thisVerticalObject.clickY);
if($(thisVerticalObject.el).next().height()-changeDistance<20){

}else{
$(thisVerticalObject.el).prev().height($(thisVerticalObject.el).prev().height()+changeDistance);
$(thisVerticalObject.el).next().height($(thisVerticalObject.el).next().height()-changeDistance);
thisVerticalObject.clickY=e.pageY;
$(thisVerticalObject.el).offset({top:e.pageY-4});
}
}
$(thisVerticalObject.el).height(10);
}
}
};

$(doc).mouseup(function(e) {
console.log("-+");
//鼠标释放时判断是否有横向操作对象
if (thisHorizontalObject != null) {
thisHorizontalObject.horizontalDragging = false;//修改横向可拖动状态
thisHorizontalObject = null;//当鼠标释放的时候，销毁横向对象
}
//鼠标释放时判断是否有竖向操作对象
if (thisVerticalObject != null) {
thisVerticalObject.verticalDragging = false;//修改竖向可拖动状态
thisVerticalObject = null;//当鼠标释放的时候，销毁竖向对象
}

e.cancelBubble = true;
});

});

jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小的更多相关文章

  1. 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  2. jQuery实现动态分割

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  3. jquery实现DIV层拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  5. jQuery调整表列(左右拉动调整列宽)插件__colResizable，动态列如何使用

    官网地址:http://www.bacubacu.com/colresizable/ 这里值得注意的是,如果是动态加入的列,则需要先清理调用插件生成的class,id和div之后再重新调用才会有作用. ...

  6. jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来

    首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('di ...

  7. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  8. js实现由分隔栏决定两侧div的大小—js动态分割div

    /*================index.html===================*/ <!DOCTYPE html><html lang="zh-cn&quo ...

  9. jQuery实现动态分割div

    转自:https://www.cnblogs.com/herd/p/6014848.html 演示地址:http://www.vfkjsd.cn/div/2/div.html

随机推荐

  1. Linux第一节课学习笔记

    我的目标是考过RHCE 开源软件有使用.复制.传播.收费.修改及创建衍生品自由,其中后二者只有开源软件才有,前四者开闭源共有.

  2. ios-UILabel居中随内容自适应，后面的控件跟在其后

    如图绿蓝框所示,UILabel显示名字,Label框随名字长短而自适应,后面的性别图片跟在其后显示 分两部分:第一部分先布局 //名字 self.nameLab = [[UILabel alloc]i ...

  3. Excel技巧--巧用分列功能整理日期格式

    遇到这样混乱的日期列表,可以使用“分列”功能来整理: 1.选择该列,点击“数据”-->“分列”功能: 2.在对话框中的第1.2步都不用设置,到第3步选择“日期”格式: 4.完成后,再使用单元格格 ...

  4. Azure CosmosDB (2) CosmosDB中的数据一致性

    <Windows Azure Platform 系列文章目录> 为了保证分布式数据库的高可用性和低延迟性,我们需要在可用性.延迟和吞吐量之间进行权衡. 绝大部分的商业分布式数据库,要求开发 ...

  5. Can't parse message of type "gazebo.msgs.Packet" because it is missing required fields: stamp, type

    在gazebo的仿真环境中,采用强化学习HER算法训练baxter执行reach.slide和pick and place任务. 运行HER算法,此时尚未启动gazebo仿真环境,出现如下报错: [l ...

  6. 红米note3发热严重，小米真垃圾！

    红米note3全网通高配版,高通处理器骁龙650(MSM8956),夏天在有空调的房间,上网几分钟手机发烫,真垃圾! ROM已经是官方最新稳定版.MIUI8.5.2.0(LHNCNED) 红米NOTE ...

  7. 20165312 2017-2018-2《JAVA程序设计》第8周学习总结

    20165312 2017-2018-2<JAVA程序设计>第8周学习总结 一.第十二章知识点总结 进程与线程 进程是程序的一次动态执行进程,它对应了从代码加载.执行至执行完毕的一个完整过 ...

  8. 二、CSS选择器

    1.CSS派生选择器 概念:通过依据元素在其位置的上下文关系来定义样式. 实例: <!--index.html--> <!DOCTYPE html> <html lang ...

  9. 六、框架<iframe>、背景、实体

    HTML5框架 框架标签(frame) 框架对于页面的设计有着很大的作用 框架集的标签(<frameset>) 框架集标签定义如何将窗口分割为框架 每一个frameset定义一系列行或列 ...

  10. 1732157 - Collecting diagnosis information for SAP HANA [VIDEO]

    Symptom SAP Support asked you to provide a collection of the relevant diagnosis files (also known as ...