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

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

阅读量：5289 次

发布时间：2019-06-14

本文共 5435 字，大约阅读时间需要 18 分钟。

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

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</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

转载于:https://www.cnblogs.com/herd/p/5983428.html

你可能感兴趣的文章

iOS开发——多线程篇——NSOperation（基于GCD多线程编程），下载图片并合成新图片...

查看>>

（*）（转）要快速学习SSM框架，你需要一套学习曲线平滑的教程

this_scope_call_apply_bind_柯里化详细分析

20145228《网络对抗技术》MSF基础应用

查看>>

leetcode 387. First Unique Character in a String

查看>>

python3 独立环境 virtualenv & conda

查看>>

SpringCloud之Eureka集群

查看>>

java如何对map进行排序详解(map集合的使用)

xampp 提示 This setting can be configured in the file "httpd-xampp.conf".

查看>>

常见软件版本号

查看>>

struts2框架之类型转换（参考第二天学习笔记）

查看>>

H5浏览器播放RTMP直播流实现切换

查看>>