模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery
<!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的更多相关文章
- Android中动态改变控件的大小的一种方法
在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现 一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...
- 动态替换iframe的src及动态改变iframe的高度
实现效果:点击左侧右侧内容变化,但左侧保持不变(如折叠等) 动态替换iframe的src <iframe width="100%" frameBorder="0&q ...
- ios 运行时特征，动态改变控件字体大小
需求:ex: 在不同尺寸的iPhone上面显示的字体大小不一样 https://github.com/rentzsch/jrswizzle #import <UIKit/UIKit.h> ...
- 动态改变Android控件大小
Button button = (Button) findViewById(R.id.button2);button.setOnClickListener(myOnClickListener); // ...
- 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...
- jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...
- js动态改变iframe的高度
js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%" height="200" ...
- Quartz动态改变任务时间
基于quartz-2.2 的动态任务调度 Quartz是一个完全由java编写的开源作业调度框架. 调度器 Quartz框架的核心是调度器.调度器负责管理Quartz应用运行时环境.调度器不是靠自己做 ...
- vue router 修改title（IOS 下动态改变title失效）
在ios下app 设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加 ...
随机推荐
- Golang（笔记） 面向对象
package main import ( "fmt" ) //对象定义 type Rect struct{ x,y float64 width ,height float64 } ...
- iOS 学习 - 24 全局跑马灯,支持后台回到前台
思路: 1.创建一个单例 + (instancetype)shareManager { static CCPaomaView *pModel = nil; static dispatch_once_t ...
- python之路径导入
问题: 最近在学习import的时候,发现不像import xxx,或者from xxx import ooo 这样简单.比如,看下面这个图: 要导入才能在te.py调用pre.tab.py?? 直接 ...
- 关于git,你需要知道一点命令
最近有朋友经常问git的一些操作,写在这里与大家分享,以后也不用一一解释了.惯例,这是基础分享,从安装开始说起: 安装: 去这里 https://git-scm.com/ 找到你所需要的版本,下载并安 ...
- LoadRunner 11 安装步骤
loadrunner 安装步骤: LoadRunner11下载: 在网上可以搜索到,在这个就不提供了. LoadRunner11原理: 破解方法和以前版本相同,我用的是LR8.0的破解文件,同样实用 ...
- params可变参数
class Program { // params可变参数 //将实参列表中跟可变参数数组类型一致的元素都当做数组的元素去处理. //params可变参数必须是形参列表中的最后一个元素. static ...
- MySQL高可用架构之MHA
简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是 ...
- 烂泥：阿里云RDS本地恢复数据
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 公司目前使用的数据库是阿里云的RDS,目前RDS的版本为mysql5.6.如下: 现在要 ...
- swift判断是否真机or模拟器
之前一直用的这种,不知道为什么不怎么靠谱 #if TARGET_IPHONE_SIMULATOR//模拟器 #else//真机 #endif 现在用这种: if Platform.isSimulato ...
- [转]Python 字符串操作实现代码(截取/替换/查找/分割)
原文地址:http://www.jb51.net/article/38102.htm ps:好久没更新python代码了,这次用到了字符串,转来看看 Python 截取字符串使用 变量[头下标:尾下标 ...