模仿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>

时间: 2024-10-10 09:31:32

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

动态等比例调整图片大小的jQuery代码

动态等比例调整图片大小的jQuery代码:有时候图片的大小和尺寸是位置,如果上传后,任由其自然伸展,很有可能导致网页变形,所以要认为的控制图片的尺寸,当然也不能够太粗暴,直接定死图片的尺寸,这样可能会导致图片变形,所以要进行等比例缩放,下面就是一段能够实现此功能的代码.代码如下: <script type="text/javascript"> jQuery(window).load(function(){ jQuery("div.product_info img&

子页面是iframe框架中 子页面改变父页面的值

<script type="text/javascript"> window.onload = function () { parent.document.getElementById('SupName').text = $("#txtName").val(); } </script>

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

需求:ex: 在不同尺寸的iPhone上面显示的字体大小不一样 https://github.com/rentzsch/jrswizzle #import <UIKit/UIKit.h> @interface UILabel (Common) - (void) swizzSetFont: (UIFont *) font; @end #import "UILabel+Common.h" @implementation UILabel (Common) -(void)swizz

js动态改变iframe的高度

js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200" frameborder="0" src="a.htm"〉 〈/iframe〉 而a.html不是固定大小的,这个时候嵌套的iframe就会出现滚动条. 通过js获取iframe的高度,然后动态的改变,这样就不会出现滚动条. 方式一:在jsp的body里增加onload方法

JSP中解决session超时跳转到登陆页面并跳出iframe框架或局部区域的方法

//方法1: 重定向到登录页,但是不支持跳出iframe//response.sendRedirect("/dormitory/toLoginPage"); //方法2:以输出页面并请求到登录页面的形式跳转到登录页面,可以跳出iframe(推荐)PrintWriter out = response.getWriter(); out.println("<html>"); out.println("<script>"); ou

ios如何动态改变title

刚刚用vue发现document.title=title在ios上并不能动态改变title(iphone上的微信端),但是在电脑上和安卓手机上却没有问题,仔细查了一下原来是ios存在title不刷新的问题基本的解决方法是: 基于:jquery var $body = $('body') document.title = 'title' var $iframe = $('<iframe src="/favicon.ico"></iframe>').on('load

unity3d关于怎样动态改变物体 shader

material = new Material(Shader.Find("Custom/Alpha")); material.SetFloat("_Shininess", materialAlpha); void OnRenderImage(RenderTexture source, RenderTexture destination){Graphics.Blit(source, destination, material);} unity3d关于怎样动态改变物体

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

嵌入的iframe框架自适应宽度代码

今天在给客户做一个提取底部,插入了一个从网上下载的头部代码,由于插入的框架底部没有自适应,我这边电脑打开看着没事,发给对方,底部小了,原因是对方的电脑比自己要宽,下面由魅力网络为大家解决这个问题 解决办法是:让插入的iframe框架代码自适应浏览器的宽度 <iframe id="frame_content" src="dibu.html" scrolling="no" frameborder="0"  width=&qu