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

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

模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery相关推荐

  1. 模仿企鹅FM播放主页面滑动动态改变各视图的大小

    国庆的一个任务就是把自己之前写的代码搬到博客.这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果),老规矩看图先: 首先看看主界面的xml布局: ...

  2. java中的pane,Java中scroll pane的使用（一）– 动态改变其client的大小 | 学步园

    动态改变scroll pane的client的大小,并达到其滚动条出现当client超出我们设定的view port大小时. package com.han; import java.awt.Bord ...

  3. php改变iframe的src,js动态改变iframe的src属性

    今天在Chrome下显示如下的iframe,src设置为空,但打开页面时iframe一直处于刷新状态,看了下面的博文,觉得是不是默认不显示时src应该写成about:blank,明天回去测试下,回来更 ...

  4. 如何更改html广告,js 动态改变广告代码DIV的位置_原生JS通过innerHTML改变div位置...

    在实际的广告应用中时不时会出现这个需求,就是我投放的广告位距离用户经常点击的翻页太远了,网站主不愿意为了这个需求去把整站的内容生成一遍,那会耗费很长时间,而且不确定有没有错误,这个时候就需要广告代码中 ...

  5. 动态改变Android控件大小

    一.  方法 使用getLayoutParams() 和setLayoutParams()方法 二.  示例代码 LinearLayout.LayoutParams linearParams = (L ...

  6. vue中设置html的fontsize,vue中rem布局使用js动态改变fontsize

    rem布局原理:使用js动态改变html的字体大小+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备能够正常显示. (function (doc, win) { var ...

  7. 如何动态改变框架的大小[转]

    如何动态改变框架的大小 解决思路: 在框架所加载页中用parent.frames["框架名"].cols="值1,值2..." 或者parent.frames[ ...

  8. 如何动态改变框架的大小

    如何动态改变框架的大小 解决思路: 在框架所加载页中用parent.frames["框架名"].cols="值1,值2..." 或者parent.frames[ ...

  9. 用javascript 动态改变iframe 的src 属性

    原文地址为: 用javascript 动态改变iframe 的src 属性 <iframe id="xx"></iframe> <iframe id= ...

  10. iframe框架及优缺点

    iframe框架及优缺点 HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别. 基本使用 src:规定在iframe中显示的文档的URL. ...

最新文章

  1. 想用Python学机器学习？Google大神替你写好了所有的编程示范代码
  2. 基于Vuejs+ElementUI的答案录入功能的一些总结
  3. 每日一皮：完美解释 UDP 为什么会丢包...
  4. ps2020的antlib文件在哪_ant design pro 新增页面
  5. 第四周实践项目5 猴子选大王（循环链表）
  6. JS的window-location
  7. 283. Move Zeroes（数组篇）
  8. 你的微信，到底「连接」多少人？
  9. 附录：更多列表操作命令
  10. 七夕节：妹纸，找个程序员做男朋友吧！
  11. Go 语言真是现在进大厂的捷径？
  12. 德国拜尔集团迎来人工智能专家--李飞飞
  13. 数据结构之基于Java的链接队列实现
  14. Web 前端怎样入门？
  15. 20155229 2016-2007-2 《Java程序设计》第一周学习总结
  16. java中可以让实例改变了类Feild（java这么干就是一个错误，你看到了就当做是类在该修改或这个类Feild）...
  17. 【java】随机分组：设计一个GUI程序，可以用来随机分组功能，如小组作业、球赛赛程
  18. 教你如何快速查询快递物流,并自动识别已签收单号
  19. 俯瞰开源工作流引擎Activiti
  20. PMP-5.项目范围管理-需求跟踪矩阵

热门文章

  1. 你的第一个java_【JAVA SE基础篇】3.你的第一个JAVA程序
  2. python怎么提高_Python心得--如何提高代码质量
  3. 科学计算机要用的电池是几号,科学的使用笔记本电池操作指南_硬件教程
  4. STM32——库函数版——超声波测距模块
  5. 轻松一刻，python乌龟绘图-小猪佩奇，可爱乌龟，新冠病毒
  6. 非线性优化：Ax=b求解的几种算法
  7. 已经编译好的OpenCV4.5.1----win10（cuda10.0 cudnn7.6.5）
  8. python数值运算函数代码_Python如何计算列表中所有数字的乘积？（代码示例）
  9. ubuntu mysql 升级_Ubuntu 升级mysql 之后的一些问题
  10. Swift 5用Template自动创建VIPER架构代码