上面是实际效果，虽然丑陋。不过当时写这个效果的时候也并不顺利。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#tab
{
table-layout:auto;
border-collapse:collapse;
border:1px solid #000000;
width:100%;
}
div
{
width:100%;
margin:0px;
padding:0px;
overflow:auto;
border: 1px solid #4CA2ED;
background-color:#E8F2FE;
font-size:9pt;
}
td
{
position:relative;
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript">
function $(dom_id)
{
return document.getElementById(dom_id);
}
function MouseDownToResize(obj)
{
obj.mouseDownY = event.clientY;
$('td1').pareneTdH = $('td1').offsetHeight;
$('td2').pareneTdH = $('td2').offsetHeight;
$('td3').pareneTdH = $('td3').offsetHeight;
$('tab').pareneTableH = $('tab').offsetHeight;
obj.setCapture();//事件扩张
}
function MouseMoveToResize(obj)
{
if(!obj.mouseDownY) return false;
var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
//拖动
if((newHeight<0 && -1*newHeight<$('td1').pareneTdH )||(newHeight>0 && newHeight<$('td3').pareneTdH))
{
$('td1').style.height = $('td1').pareneTdH+newHeight;
$('td3').style.height = $('td3').pareneTdH-newHeight;
$('div1').style.height = $('td1').pareneTdH+newHeight;
$('div3').style.height = $('td3').pareneTdH-newHeight;
$('tab').style.height = $('tab').pareneTableH;
window.status = newHeight +"||"+ $('td3').style.height;
}
}
function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</script>
</head>
<body>
<table id="tab" cellpadding="0" cellspacing="0">
<tr><td valign=top id="td1"><div id="div1" style="height:250px;">
<pre>
function $(dom_id)
{
return document.getElementById(dom_id);
}
function MouseDownToResize(obj)
{
obj.mouseDownY = event.clientY;
$('td1').pareneTdH = $('td1').offsetHeight;
$('td2').pareneTdH = $('td2').offsetHeight;
$('td3').pareneTdH = $('td3').offsetHeight;
$('tab').pareneTableH = $('tab').offsetHeight;
obj.setCapture();//事件扩张
}
function MouseMoveToResize(obj)
{
if(!obj.mouseDownY) return false;
var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
//拖动
if((newHeight<0 && -1*newHeight<=$('td1').pareneTdH )||(newHeight>0 && newHeight<=$('td3').pareneTdH))
{
$('td1').style.height = $('td1').pareneTdH+newHeight;
$('td3').style.height = $('td3').pareneTdH-newHeight;
$('div1').style.height = $('td1').pareneTdH+newHeight;
$('div3').style.height = $('td3').pareneTdH-newHeight;
$('tab').style.height = $('tab').pareneTableH;
window.status = newHeight +"||"+ $('td3').style.height;
}
}
function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</pre>
</div></td></tr>
<tr bgcolor="#000" height="2" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);" style="cursor:n-resize;"><td id="td2"></td></tr>
<tr><td id="td3"><div id="div3" style="height:150px;"></div></td></tr>
</table>
</body>
</html>
分享到：
相关推荐
这个项目“jquery实现的 鼠标拖拽改变块大小”是一个利用jQuery创建的互动效果，允许用户通过鼠标拖动来调整元素的大小，这种功能在各种网页应用和界面设计中非常常见，如可调整大小的编辑区域或面板。 首先，我们...
【标题】"js窗口拖拽（改变大小,最小化,最大化,还原,关闭）"是一个JavaScript实现的项目，主要用于创建具有拖动、缩放、最小化、最大化和关闭功能的弹出窗口。这个项目适用于那些希望在网页上实现类似桌面应用交互...
折叠效果则可以通过改变面板的高度或宽度至0，或者使用 CSS 的 `display` 属性切换显示状态。 在实际项目中，此组件还可能涉及到边界检测，防止 panel 超出容器范围。另外，为了保持良好的性能，可以考虑使用 Vue....
标题中的“JS实现左右拖动改变内容显示区域大小的方法”是指使用JavaScript编程语言来创建一个交互式的用户界面，其中用户可以通过拖动一个分隔条（通常表现为一条红色的线）来调整两个并排内容区域的宽度，从而改变...
5. **API接口**：通过API，开发者可以动态地调整面板大小，或者在代码中触发面板的分割和合并操作。 **使用步骤** 1. **引入Split.js**：首先需要将split.js库引入到HTML文件中，通常放在`<head>`标签内或者`...
在本项目中，我们关注的是一个可拖拽的Bootstrap弹出窗口，这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的位置。这个功能是通过结合Bootstrap的弹出插件与jQuery UI库来实现的。 首先，`Bootstrap` 是一个...
表格的左右拖动通常涉及到水平分割面板（splitpane）的使用，这是一种可以动态调整两侧区域大小的布局组件。在上下拖动方面，原理类似，但适用于垂直方向的调整。这种功能的核心是监听鼠标的移动事件，当用户在特定...
通过点击并拖动面板边缘，可以实时改变面板的宽度和高度，适应不同的显示需求。 3. **浮动面板**：Lobipanel的面板可以在页面上自由浮动，不会受到其他元素的限制，确保它们始终保持可见，这对于多任务操作和信息...
"可伸缩面板"则更进一步，它不仅允许折叠和展开，还允许用户通过拖动边框来动态改变面板的大小。这为用户提供了更大的自由度，可以根据内容的多少或个人偏好调整视图。例如，在Outlook中，用户可能希望在邮件列表和...
### jQuery拖拽通过八个点改变div大小知识点 jQuery是一种快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。在web开发中，使用jQuery实现拖拽功能是一种常见的交互手段...
3. **移动（Move）**：在元素已经可拖动的情况下，移动功能实际上已经集成在拖拽操作中。当用户在页面上移动鼠标时，元素会跟随鼠标的移动而改变位置。如果需要独立的移动功能，可以通过监听鼠标的`mousedown`、`...
边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或删除小部件 布局可以序列化和还原 自动RTL支持（调整大小无法在2.2.0上使用RTL） React灵敏 当前版本： 2.3.12（支持Vue 2.2+） 对于IE11等旧版浏览器...
这个库使得开发者能够轻松地将页面分为上下、左右等多栏布局，并允许用户根据自己的需求动态改变这些分栏的大小。在网页设计中，这种功能常见于代码编辑器、数据预览界面或者需要对比不同内容的场景。 1. **基本...
JavaScript用于捕捉鼠标移动事件，根据鼠标的当前位置计算出预览区域的放大倍数和坐标，进而改变预览区域的背景位置，从而实现放大镜的效果。jQuery的事件处理和CSS属性修改功能在这里同样起到了简化代码的作用。 ...
6. **时间轴（Timeline）**：用于呈现事件或历程的时间顺序，元素沿时间轴移动或改变大小，使信息展示更直观。 7. **计时器与倒计时（Counters & Countdowns）**：常用于活动开始或结束前的提醒，动态更新剩余时间...
在实际应用中，这些技术可以用于创建各种互动效果，比如可拖动的面板、滑块、游戏对象等。JavaScript的灵活性使得开发者可以自由地调整参数，以适应不同的场景和用户体验需求。例如，你可以调整重力的大小，改变碰撞...
实例148 自动改变大小 231 实例149 选择字体的大小 232 5.3 文字显示效果 234 实例150 文字渐隐渐现 234 实例151 文字虚幻变化 235 实例152 文字虚幻抖动 237 5.4 指定文字位置 238 实例153 将文字置于工作区左上角 ...
例如，当面板进入某个可接受的区域时，我们可能希望改变面板的样式以提供反馈。 对于动态布局，EXTJS 的`Ext.layout.container`类提供了多种布局方式，如Fit布局、Border布局、Form布局等。在拖放操作中，我们需要...
类库通常提供方法来改变悬浮窗的位置和大小，比如`SetPosition(x, y)`用于设置窗口坐标，`SetSize(width, height)`用于设定窗口尺寸。开发者可以根据需要动态调整这些属性，以适应不同的应用场景。 3. **悬浮窗...
### JavaScript 控制图片大小的拖动滑块技术 #### 1. 概述 在Web页面中，实现图片大小的动态调整是一个常见需求。传统上，用户可能需要点击按钮或在选项中选择，然后页面重新加载或显示新大小的图片。然而，使用...