js实现由分隔栏决定两侧div的大小

/*================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的更多相关文章

转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包可用于页面布局. //============================ind ...
jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包可用于页面布局. //============================ind ...
jQuery实现动态分割div
转自:https://www.cnblogs.com/herd/p/6014848.html 演示地址:http://www.vfkjsd.cn/div/2/div.html
利用修改div的位置+js对象存储div信息实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息实现简单的div自定义布局功能利用修改div的位置+js对象存储div信息实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
动态添加div及对应的js、css文件
动态添加div及对应的js.css文件在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...
JaveWeb 公司项目（7）----- 通过JS动态生成DIV
Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...
偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道
封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来.第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 ——html—— <script t ...
原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
jquery动态为个span，input，div，等标签赋值的方法总结，js动态隐藏div
1.jquery为span和div标签赋值. <span id="span1"></span> <div id="div1"> ...

随机推荐

Sharepoint学习笔记—ECM系列—文档列表的Metedata Navigation与Key Filter功能的实现
如果一个文档列表中存放了成百上千的文档,想要快速的找到你想要的还真不是件容易的事,Sharepoint提供了Metedata Navigation与Key Filter功能可以帮助我们快速的过滤和定位 ...
openfire安装
服务器第一次能够开启,但不久就断开,再连接就会闪退,命令行更改Java路径后即可 http://www.jianshu.com/p/5d88fe201c71 开启服务器后,导入数据库脚本,创建几个测试 ...
关于OC中的小数精确计算---NSDecimalNumber
NSDecimalNumber 翻译补充自:http://rypress.com/tutorials/objective-c/data-types/nsdecimalnumber 感谢乐于分享的大神 ...
python之选课系统详解[功能未完善]
作业需求思路:1.先写出大体的类,比如学校类,学生类,课程类-- 2.写出类里面大概的方法,比如学校类里面有创建讲师.创建班级-- 3.根据下面写出大致的代码,并实现其功能遇到的困 ...
android 事件分发机制
1.View的事件分发机制一个button,简单一点就是onTouch,还有onclick事件,我们一个一个来分析首先响应的是dispatchTouchEvent public boolean d ...
Meet Sccot Guthrie in Shanghai
9月16日,有幸和其他9位MVP一起在上海和微软全球副总裁Sccot Guthrie.开发工具部门Somasegar.微软中国申元庆见面,聊关于Azure和开发方面的话题.同时,由于本人目前对物联网( ...
关于一个sql的优化分析
应用这边新上线了一个查询,正在跑,让我看下状态以及分析下能不能再快点. 如下sql: SELECT x.order_no , order_date+7/24 AS order_date, addres ...
BOOST.Asio——扫盲
以下内容来自互联网. 鉴于版权之类的东西,我只贴出标题和URL. (无法考证下述资料是否原创.) asio串口编程 ...
stm32定时器实现60秒定时秒表
#include "led.h" #include "delay.h" #include "key.h" #include "sy ...
《InsideUE4》-5-GamePlay架构（四）Pawn
<InsideUE4>-5-GamePlay架构(四)Pawn Tags: InsideUE4 我像是一颗棋进退任由你决定我不是你眼中唯一将领却是不起眼的小兵引言欢迎来到Game ...

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

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

随机推荐

热门专题