js实现由分隔栏决定两侧div的大小—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"> ...
随机推荐
- 机器人聊天的小Demo
先来张图,看看我们要做成什么样的效果.很简单的一个发送消息接收消息的界面,那怎么实现的呢,毫无疑问,是ListView的多布局了,右边显示我们发送消息的条目,左边显示要接收消息的条目.下面是一个Edi ...
- 全局响应MotionEvent
遇到这样一个需求:应用无论处于哪个view controller,摇动手机,都能够出发某一方法. 能够想到的思路就是用苹果封装好的“MotionEvent”,但是如果简单的把一下代码加到某一view ...
- iOS百度地图SDK集成详细步骤
1.iOS百度地图下载地址 http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 根据需要选择不同的版本 ...
- ORACLE NUMBER类型Scale为0引发的问题
今天遇到了一个很有意思的NUMBER类型Scale引发的问题,我用一个简单的测试用例来展示一下这个案例.假如有个TEST的表,有个字段类型为NUMBER,我插入下面两条数据 CREATE TABLE ...
- ORACLE DELETE数据慢的案例
今天遇到一个有意思的案例,一开发同事告诉我他删除一个表的记录非常慢,已经快1个多小时了还没有完成.而且删除的记录只有1百多条.真是大跌眼镜的一件事情.最后发现该表与多个表有外键关联关系(这个表即是主表 ...
- ORACLE OLAP错误ORA-06512: at "SYS.OLAPIHISTORYRETENTION"
刚刚安装了ORACLE 10g R2后,启动数据库时发现告警日志有如下错误: Database Characterset is UTF8 replication_dependency_tracking ...
- -bash: ulimit: pipe size: cannot modify limit: Invalid argument
从root账号切换到oracle账号时,出现了"-bash: ulimit: pipe size: cannot modify limit: Invalid argument"提示 ...
- InfluxDB学习之InfluxDB数据保留策略（Retention Policies）
InfluxDB每秒可以处理成千上万条数据,要将这些数据全部保存下来会占用大量的存储空间,有时我们可能并不需要将所有历史数据进行存储,因此,InfluxDB推出了数据保留策略(Retention Po ...
- 配置windows路由表，使电脑同时连接内网外网方法
1.环境一(系统:windows xp,内网.外网不是同一类地址,内网地址固定): 外网:通过笔记本的无线网卡连接: 内网:通过笔记本的本地连接: 第一步,连接网线,配置本地连接地址,注意IP地址不要 ...
- AngularJS笔记--自定义指令
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义. 下面定 ...