<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>分隔栏动态改变div大小—基于jQuery</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=""/>

<style>
*{margin:0;padding:0;}
ul,ol,li{list-style: none;}
#hj_wrap{width:1200px;height: 250px;margin:10px auto;clear:both;border:1px solid red;overflow: hidden;}
#hj_wrap div{width:200px;float: left;height: 250px;padding:10px;background: #0099EE;overflow: hidden;border:0px solid #0099ff;}
#hj_wrap label{float: left;width: 10px;height: 250px;display:block;cursor: e-resize;}
</style>
</head>
<body>
<div id='hj_wrap'>
<div>左</div>
<label>1</label>
<div>中</div>
<label>2</label>
<div>右</div>
<label>3</label>
<div>右1</div>
<label>4</label>
<div>右2</div>
</div>

<script src="jquery-1.8.0.min.js"></script>

<script>
$(function(){
var leftOffset, inx, nextW2, nextW ,thisObject;
var dragging = false;
var doc = document;
var labBtn = $("#hj_wrap").find('label');
var wrapWidth = $("#hj_wrap").width();
//定义一个对象
function PointerObject(){
this.el = null;
this.grabx = null;
this.left = null;
this.pointerPosition =0;
this.clickX =0;
}

labBtn.bind('mousedown',function(e){
dragging = true;
thisObject = new PointerObject();
thisObject.el = this;
thisObject.pointerPosition = $(this).offset().left;
thisObject.clickX = e.pageX;
}
);

doc.onmousemove = function(e){
if (dragging) {
if(thisObject != null){
var changeDistance = 0;
var nextWidth = $(thisObject.el).next().width();
var prevWidth = $(thisObject.el).prev().width();
if(thisObject.clickX>=e.pageX){
//鼠标向左移动
changeDistance = Number(thisObject.clickX)-Number(e.pageX);
if($(thisObject.el).prev().width()-changeDistance<20){

}else{
$(thisObject.el).prev().width($(thisObject.el).prev().width()-changeDistance);
$(thisObject.el).next().width($(thisObject.el).next().width()+changeDistance);
thisObject.pointerPosition = (thisObject.pointerPosition - changeDistance);
thisObject.clickX=e.pageX;
$(thisObject.el).offset({left:e.pageX-2});
}

}else{
//鼠标向右移动
changeDistance = Number(e.pageX)-Number(thisObject.clickX);
if($(thisObject.el).next().width()-changeDistance<20){

}else{
$(thisObject.el).prev().width($(thisObject.el).prev().width()+changeDistance);
$(thisObject.el).next().width($(thisObject.el).next().width()-changeDistance);
thisObject.pointerPosition = (thisObject.pointerPosition + changeDistance);
thisObject.clickX=e.pageX;
$(thisObject.el).offset({left:e.pageX-2});
}
}
}
}
};

$(doc).mouseup(function(e) {
if (thisObject != null) {
thisObject = null;
}
dragging = false;
e.cancelBubble = true;
})
})
</script>
</div>
</body>
</html>

模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery的更多相关文章

  1. Android中动态改变控件的大小的一种方法

    在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现  一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...

  2. 动态替换iframe的src及动态改变iframe的高度

    实现效果:点击左侧右侧内容变化,但左侧保持不变(如折叠等) 动态替换iframe的src <iframe width="100%" frameBorder="0&q ...

  3. ios 运行时特征，动态改变控件字体大小

    需求:ex: 在不同尺寸的iPhone上面显示的字体大小不一样 https://github.com/rentzsch/jrswizzle #import <UIKit/UIKit.h> ...

  4. 动态改变Android控件大小

    Button button = (Button) findViewById(R.id.button2);button.setOnClickListener(myOnClickListener); // ...

  5. 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  6. jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  7. js动态改变iframe的高度

    js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200"   ...

  8. Quartz动态改变任务时间

    基于quartz-2.2 的动态任务调度 Quartz是一个完全由java编写的开源作业调度框架. 调度器 Quartz框架的核心是调度器.调度器负责管理Quartz应用运行时环境.调度器不是靠自己做 ...

  9. vue router 修改title（IOS 下动态改变title失效）

    在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加   ...

随机推荐

  1. 关于在SharePoint 2013（2010）中Javascript如何实现批量批准的自定义操作功能？

    1.概述: SharePoint 2013(包括SharePoint 2010)提供了很方便的,多选的界面,但是很多操作还是不能批量进行,比如:批准的功能.如果您要解决方案不关心代码,那么请直接联系作 ...

  2. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  3. IOS RunLoop浅析 三

    经过两篇的介绍我想对RunLoop应该有了简单的了解,至少不至于一无所知. 在这篇我想对“CFRunLoopObserverRef”做一下简单的补充. 在补充之前先说一下. 在现在的开发中已经很少见到 ...

  4. Android Studio连接真机没反应?

    刚好遇到这个问题,在网上百度了一下,看到有人分享了引起该问题的几个原因: 手机设置问题.开USB调试 方法: 手机设置 - 开发人员选项 - USB调试 - 勾选 数据线问题. 有的数据线只能用来充电 ...

  5. ORA-19563: header validation failed for file

    在测试服务器还原数据库时遇到了ORA-19563错误.如下所示 RMAN-00571: ======================================================== ...

  6. SQL SERVER Transactional Replication中添加新表如何不初始化整个快照

    在SQL SERVER的复制(Replication)中,有可能出现由于业务需求变更,需要新增一张表或一些表到已有的复制(发布订阅)当中,这种需求应该是很正常,也很常见的.但是在已有的复制(发布订阅) ...

  7. [原创]kali linux下破解wifi密码以及局域网渗透

    无线破解是进行无线渗透的第一步.破解无线目前只有两种方法:抓包.跑pin. 破解无线方法一:抓包.我是在kali linux下进行的. 将无线网卡的模式调为监听模式. airmon-ng start ...

  8. linux中inode、软链接、硬链接

    1 软链接 linux中软链接理解成window中的快捷方式.创建软链接的命令 ln -s 源文文件或目录 目标文件或目录 2 硬链接 创建硬链接的命令如下 ln  源文文件或目录 目标文件或目录 3 ...

  9. 小讲堂：Mobox文档管理软件中的文件外链是什么？

    今天我们来讨论Mobox文档管理软件中的文件外链是什么?熟悉MOBOX的朋友们应该知道,如果有文件需要分享给其他同事,直接可以进行文件共享.对方会在AM的即时通讯客户端有消息提醒,点击消息提醒可以看到 ...

  10. 自定义框架（MyMvc）

    //初次接触自定义框架,简单的登录功能的实现流程:: 当我们实现登录功能的时候,首先会创建一个login.jsp 会写这些登录表单 <form action="loginAction. ...