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"> ...
随机推荐
- 关于ArcGIS API for JavaScript中basemap的总结介绍（一）
实际上basemap这个概念并不只在arcgis中才有,在Python中有一个matplotlib basemap toolkit(https://pypi.python.org/pypi/basem ...
- Gradle's dependency cache may be corrupt解决方法
问题描述: Error:Unable to find method 'com.google.common.cache.CacheBuilder.build(Lcom/google/common/cac ...
- drawRect与setNeedsDisplay简单介绍
- (void)drawRect:(CGRect)rect { } p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: ...
- CSS3选择器——基本选择器
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...
- iOS 疑难杂症 — — 在 Storyboard 里 Add Size Class Customization 后再从代码里无法修改的问题
前言 公司的产品同时适配 iPhone 和 iPad ,并坚持用 Storyboard 来做适配,今天又踩一个坑(以前遇到过)还以为是 XCode 的鬼毛病. 声明 欢迎转载,但请保留文章原始出处: ...
- PHP(第一天)
<?php // $name='lisi'; // $age =18; //$bol =true; //$bol =false; // echo ($bol); //echo ('name is ...
- 【从零开始学习Hadoop】--2.HDFS分布式文件系统
1. 文件系统从头说2. Hadoop的文件系统3. 如何将文件复制到HDFS3.1 目录和文件结构3.2 FileCopy.java文件的源代码3.3 编译3.4打包3.5 运行3.6 检查结果 1 ...
- jar命令的用法详解
本文详细讲述了JAR命令的用法,对于大家学习和总结jar命令的使用有一定的帮助作用.具体如下: JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有区别的,JAR包中 ...
- BOM与事件
PPK谈JS学习笔记第二弹 JS的语言核心和DOM之间有一个过渡层,一般称为BOM,浏览器对象模型.是指JS的客户端实现,它不操作DOM,又不是JS的语言核心,它的主要功能是管理浏览器窗口,每个窗口都 ...
- 云与备份之（1）：VMware虚机备份和恢复
本系列文章会介绍云与备份之间的关系,包括: (1)VMware 虚机备份和恢复 (2)KVM 虚机备份和恢复 (3)云与备份 (4)OpenStack 与备份 (5)公有云与备份 1. 与备份有关的V ...