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"> ...
随机推荐
- 【Android】实现XML解析的几种技术
本文介绍在Android平台中实现对XML的三种解析方式. XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为Android开发中一项重要的技能. 在 ...
- AES 加密工具类
/** * AES 是一种可逆加密算法,对用户的敏感信息加密处理 对原始数据进行AES加密后,在进行Base64编码转化: */public class AESOperator { /* * 加密用的 ...
- iOS真机测试碰到错误linker command failed with exit code 1 (use -v to see invocation)
在模拟器上运行正常,但是在模拟器上就会报错,这是因为xocde7之后增加了一个bitcode,bitcode是被编译程序的一种中间形式的代码.包含bitcode配置的程序将会在App store上被编 ...
- 【原】iOS：手把手教你发布代码到CocoaPods(Trunk方式)
Change Log: 2015.08.20 - 添加podspec文件更新方法 2015.08.19 - 首次发布 概述 关于CocoaPods的介绍不在本文的主题范围内,如果你是iOS开发者却不知 ...
- iOS开发之功能模块--本地序列化
下面只展示项目开发中,本地序列化的示例代码: AuthenticationManager.h #import <Foundation/Foundation.h> #import " ...
- 使用VS2015开发跨平台APP
VS2013开始就可以基于HTML5开发WEBAPP,并借助xamarin或者PHONEGAP实现原生APP 不过升级麻烦,直接下载VS2015CTP6,最好安装在同一个分区上,ANDROID S ...
- 关于web页面性能测量指标与建议
首先看一个图: 注:右图在我们工作中经常用到 我们专注的web性能指标有那些? 1.页面加载时间 从页面开始加载到页面onload事件触发的时间.一般来说onload触发代表着直接通过HTML引用的C ...
- Linux 平台安装Oracle Database 12c
1)下载Oracle Database 12cRelease 1安装介质 官方的下载地址: 1:http://www.oracle.com/technetwork/database/enterpris ...
- CRLF line terminators导致shell脚本报错：command not found
Linux和Windows文本文件的行结束标志不同.在Linux中,文本文件用"/n"表示回车换行,而Windows用"/r/n"表示回车换行.有时候在Wind ...
- Error: 9001, Severity: 21, State: 5 The log for database 'xxxx' is not available
昨天下午5点多收到几封告警邮件,我还没有来得及看,GLE那边的同事就电话过来,说数据库出现告警了.让我赶紧看看,案例具体信息如下所示: 告警邮件内容: DATE/TIME: 2015/1/23 17: ...