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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" charset="text/html; utf-8"/>
<meta charset="utf-8">
<title>wind</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=""/>
<link rel="stylesheet" href="20161020.css">
<script src="20161020.js"></script>
</head>
<body>
<div class="hj_bootstrap_div">
<div class="hj_re_div1">11111</div>
<div class="hj_re_div"></div>
<div class="hj_re_div1">2222222</div>
</div>
<div class="hj_bootstrap_div">
<div class="hj_re_div1">11111</div>
<div class="hj_re_div"></div>
<div class="hj_re_div1">2222222</div>
<div class="hj_re_div"></div>
<div class="hj_re_div1">333333</div>
</div>
<div class="hj_bootstrap_div">
<div class="hj_re_div1">11111</div>
<div class="hj_re_div"></div>
<div class="hj_re_div1">2222222</div>
<div class="hj_re_div"></div>
<div class="hj_re_div1">333333</div>
<div class="hj_re_div"></div>
<div class="hj_re_div1">44444</div>
</div>
</body>
</html>

/*================20161020.css===================*/

.hj_bootstrap_div{
width:100%;
height:200px;
border:1px solid #ccc;
margin:10px;

}

.hj_bootstrap_div .hj_re_div1{
width:300px;
height:100%;
float:left;
border:1px solid #ccc;
overflow: hidden;
}

.hj_re_div{
width:3px;
height:100%;
float:left;
border:2px solid #fff;
background-color:#ccc;
}

/*================20161020.js===================*/

document.onmousedown = hj_doDown;
document.onmouseup = hj_doUp;
document.onmousemove = hj_doMove;
//定义一个指针对象
var theobject = null;

//定义一个对象
function ElasticFrame(){
this.el = null;
this.dir = "";
this.grabx = null;
this.graby = null;
this.width = null;
this.height = null;
this.left = null;
this.top = null;
}

/**
*鼠标按下事件
*/
function hj_doDown(event){
event = event || window.event;//兼容火狐
var el1 = getReal(event.srcElement ? event.srcElement : event.target, "className", "hj_re_div");
var nml=9;
if (el1 == null) {
theobject = null;
return;
}
dir = getDirection(el1,event);
if (dir == "") return;
theobject = new ElasticFrame();
theobject.el = el1;
theobject.dir = dir;
theobject.grabx = event.clientX;
theobject.graby = event.clientY;
theobject.width = el1.offsetWidth;
theobject.left = el1.offsetLeft;
theobject.top = el1.offsetTop;
event.returnValue = false;
event.cancelBubble = true;
}

/**
*鼠标松开事件
*/
function hj_doUp(){
if (theobject != null) {
theobject = null;
}
}

/**
*鼠标移动事件
*
*/
function hj_doMove(event){
var xPos, yPos, str ,xMin;
event = event || window.event;
var el1 = getReal(event.srcElement ? event.srcElement : event.target, "className", "hj_re_div");
var next_width = 0;
var previous_width = 0;
xMin = 8;
//console.log(el1);
if (el1.className == "hj_re_div") {
var str = getDirection(el1,event);
if (str == ""){
str = "default";
}else{
str += "-resize";
}
el1.style.cursor = str;
//兼容IE
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
next_width=el1.nextElementSibling.offsetWidth - 2;//右边的宽度
previous_width =el1.previousElementSibling.offsetWidth - 2;
}else{
next_width=el1.nextSibling.nextElementSibling.offsetWidth - 2;//右边的宽度
previous_width =el1.previousSibling.previousElementSibling.offsetWidth -2;
}
}

if(theobject != null) {
var movingDistance1 =event.clientX - theobject.grabx;
if (dir.indexOf("col") != -1){
var num1 = Number(event.clientX);
var num2 = Number(theobject.grabx);
if(num1 > num2){
if(next_width < 20){

}else{
theobject.grabx = event.clientX;
//兼容IE
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
el1.previousElementSibling.style.width = Math.max(xMin,previous_width + movingDistance1)+ "px";
el1.nextElementSibling.style.width = Math.max(xMin, next_width- movingDistance1) + "px";
}else{
el1.previousSibling.previousElementSibling.style.width = Math.max(xMin,previous_width + movingDistance1)+ "px";
el1.nextSibling.nextElementSibling.style.width = Math.max(xMin, next_width- movingDistance1) + "px";
}
}
}else if(num1 <= num2){
if(previous_width < 20){

}else{
theobject.grabx =event.clientX;
//兼容IE
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
el1.previousElementSibling.style.width = Math.max(xMin,previous_width + movingDistance1) + "px";
el1.nextElementSibling.style.width = Math.max(xMin,next_width - movingDistance1) + "px";
}else{
el1.previousSibling.previousElementSibling.style.width = Math.max(xMin,previous_width + movingDistance1) + "px";
el1.nextSibling.nextElementSibling.style.width = Math.max(xMin,next_width - movingDistance1) + "px";
}
}
}

}
event.returnValue = false;
event.cancelBubble = true;
}
}

/**
*获取检测对象
*/
function getReal(el, type, value) {
var temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}

/**
*获取鼠标形状
*
*/
function getDirection(el,event){
event = event || window.event;
var xPos, yPos, offset, dir;
dir = "";
xPos = event.offsetX;
offset = 9900000;
if (xPos > el.offsetWidth-offset){
dir += "col";
}
return dir;
}

演示地址：http://www.vfkjsd.cn/div/index1.html

js实现由分隔栏决定两侧div的大小—js动态分割div的更多相关文章

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

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

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

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

  3. jQuery实现动态分割div

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

  4. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  5. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  6. JaveWeb 公司项目（7）----- 通过JS动态生成DIV

    Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...

  7. 偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道

    封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来.第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 ——html—— <script t ...

  8. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  9. jquery动态为个span，input，div，等标签赋值的方法总结，js动态隐藏div

    1.jquery为span和div标签赋值. <span id="span1"></span> <div id="div1"> ...

随机推荐

  1. 时空地图 TimeGIS.com 中生成等值线

    在我的地图软件TimeGIS中加入了等值线生成的功能: 等值线的生成使用了wCoutour库, 代码根据这里的例子修改,http://www.06climate.com/view/1244.html ...

  2. iOS之2016面试题一

    序言 招聘高峰期来了,大家都非常积极地准备着跳槽,那么去一家公司面试就会有一堆新鲜的问题,可能不会,也可能会,但是了解不够深.本篇文章为群里的小伙伴们去宝库公司的笔试题,由笔者整理并提供笔者个人参考答 ...

  3. 利用UICollectionViewFlowLayout的隐式动画实现UICollectionView的layout的动画调整（外加放大指定cell效果）

    前几天在gitHub看到个不错的效果,就是DaiExpandCollectionView,效果如图:   所以赶紧下下来源码看看他怎么实现的,打开源码看了半天,发现他没写什么关于动画的代码啊... 经 ...

  4. CocoaPods的使用及安装

    本文转自:http://www.jianshu.com/p/6e5c0f78200a 一.什么是CocoaPods CocoaPods是iOS项目的依赖管理工具,该项目源码在Github上管理.开发i ...

  5. FMDB基本使用

    1.打开数据库 #import "ViewController.h" #import "FMDB.h" @interface ViewController () ...

  6. jquery数组删除指定元素的方法:grep()

    jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...

  7. IIS不能下载ini文件

    1.打开IIS. 2.选择站点或者存放*.ini文件的目录,右键菜单中选择属性. 3.选择“HTTP头”选项卡. 4.点击“MINE类型”. 5.点击“新建”. 6.这是跳出一个对话框,在“扩展名”一 ...

  8. MongoDB学习笔记——分片（Sharding）

    分片(Sharding) 分片就是将数据进行拆分,并将其分别存储在不同的服务器上 MongoDB支持自动分片能够自动处理数据在分片上的分布 MongoDB分片有三种角色 配置服务器:一个单独的mong ...

  9. ubuntu16.04连接android手机蓝牙共享网络热点

    最近的想要用android手机蓝牙共享wifi网络给ubuntu16.04系统用,查了好多资料,发现网上很少有有用的.自己实践后分享如下. 第一步:手机与电脑配对:         该步骤比较简单,网 ...

  10. ELF Format 笔记（十四）—— 段内容

    ilocker:关注 Android 安全(新手) QQ: 2597294287 一个段 (segment) 由一个或多个节 (section) 组成,但这对 android linker 是透明的, ...