`

TD实现鼠标Resize效果..

阅读更多
很简单的代码,功能还有点小Bug,不过很开心能实现。

JQuery代码:
$(function(){
/*
	 * 鼠标Resize
	 */
	$("#mouseMove").mousedown(
		function(ev){
			var _dragingElement=$(this).prev("td").children("div");
				
			$(document).mousemove(function(ev){
				ev = ev || window.event;
					
				var _x=ev.clientX;
					
				if(_x<0){
					$(_dragingElement).width(0);
				}else{
					$(_dragingElement).width(_x);
				}
			});
			$(document).mouseup(function(ev){
				$(document).unbind('mousemove');
				$(document).unbind('mouseup');				
			});
		}
	);
});

HTML代码:
<table cellpadding="0" cellspacing="1">
								<tbody>
									<tr>
										<td valign="top" width="1px">
											<div style="width:200px;height:450px;">
											</div>
										</td>
										<td style="width:2px;margin:0px;padding:0px;cursor:e-resize;" id="mouseMove"></td>
										<td valign="top">
											<iframe frameborder="0" height="430px" width="100%" src="infoView.jsp" name="infoView"></iframe>
										</td>
									</tr>
								</tbody>
							</table>
分享到:
评论

相关推荐

    table实现列宽的拖动效果

    为了使拖动效果更加平滑,可能需要添加一些CSS样式,比如增加鼠标形状提示(`cursor: ew-resize;`),以及在拖动过程中显示视觉反馈,如边框高亮或阴影。 5. **响应式设计**: 当考虑不同设备和屏幕尺寸时,列宽...

    html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo.rar

    在这个示例中,开发人员可能使用JavaScript或者CSS3的`resize`属性实现了列宽的动态调整。用户可以通过拖动列边框来改变列宽。通常,这需要监听鼠标事件,如`mousedown`、`mousemove`和`mouseup`,并在这些事件之间...

    table表格拖动改变td宽度

    例如,当鼠标悬浮在`td`上时,可以将鼠标光标更改为`ew-resize`,表示可以水平拖动。 3. **JavaScript 或 jQuery**:这个功能的核心部分是使用JavaScript或jQuery来处理拖动事件。你可以监听鼠标的`mousedown`、`...

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题,让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能,首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

    js 可改变表格单元格大小

    在JavaScript(JS)中,实现可改变表格单元格(td)大小的功能,通常涉及到HTML、CSS和JavaScript的交互。在给定的标题“js 可改变表格单元格大小”和描述中,我们可以推断出这个功能是允许用户通过某种交互方式(如...

    拖动table标题实现改变td的大小(css+js代码)

    cursor: e-resize; } ``` 3. JavaScript实现拖拽调整宽度 JavaScript部分包括几个关键的函数,用于捕捉鼠标事件并动态调整单元格和表格的宽度。`MouseDownToResize`函数负责捕获鼠标按下事件,并记录鼠标按下的...

    table自动宽度拉伸

    在"jQuery实现表格宽度自动拖拽效果"的文件中,我们可以找到一个例子,该例子展示了如何通过jQuery实现表格列的拖拽功能,让用户能够自由调整列宽。 以下是一个简单的jQuery插件示例,用于实现表格列宽的拖动调整:...

    vue-col-resize:指示

    `vue-col-resize`通常会监听鼠标的拖动事件来实现列宽调整。它可能还提供了其他配置选项,如最小和最大宽度限制,以及事件回调,以便在调整列宽时执行某些操作。例如,你可能想要在列宽改变时保存新的布局到服务器,...

    JQuery table改变列的宽度

    3. 使用jQuery的事件绑定功能,监听鼠标按下(`mousedown`)、移动(`mousemove`)和抬起(`mouseup`)事件。 4. 在`mousedown`事件中记录初始位置,`mousemove`事件中计算并更新列宽,`mouseup`事件中停止更新。 5....

    js使用小技巧

    根据鼠标获得元素: document.elementFromPoint(event.x,event.y).tagName=="TD document.elementFromPoint(event.x,event.y).appendChild(ms) 窗体图片 document.images[索引] 窗体事件绑定 document....

    JS手动改变table的宽度

    鼠标选中文字查询功能通常用于实现用户在网页上选中一段文本后,触发搜索或查找操作。这通常涉及到以下步骤: 1. **监听选中事件**: JavaScript提供了`selection`对象来获取当前选中的文本。可以监听`mouseup`事件...

    200个js效果,对初学者很有作用

    - 通过这种方式可以方便地实现页面打印功能。 #### 示例十二:背景颜色选择器 ```html &lt;!--function bgChange(selObj){ newColor = selObj.options[selObj.selectedIndex].text; document.bgColor = newColor; ...

    网页动态改变表格大小

    手柄通常设置为不可选中(`user-select: none`),并具有适当的鼠标指针(`cursor: ew-resize`)以指示可以拖动。此外,需要通过相对定位(`position: relative`)和绝对定位(`position: absolute`)确保手柄不会...

    JS实现可改变列宽的table实例

    3. 鼠标指针样式调整:当用户拖动调整列宽时,通过修改单元格的style.cursor属性为'col-resize',将鼠标指针改变为调整列宽的形状,提升用户体验。 4. 单元格宽度动态调整:在mousedown事件中记录下拖动开始时的...

    各种网页常用技巧(精品

    使用JavaScript可以轻松实现全屏显示的效果: ```javascript self.moveTo(0, 0); self.resizeTo(screen.availWidth, screen.availHeight); ``` 这段代码将浏览器窗口移动到屏幕左上角,并调整其大小以充满整个...

    鼠标拖动改变左右单元格宽度特效代码

    然后,引入JavaScript(这里通常使用的是jQuery库,因为它提供了方便的DOM操作和事件处理)来实现拖动效果。主要步骤包括: 1. 添加鼠标按下事件监听器到单元格的边界。 2. 在按下时记录初始鼠标位置和当前单元格的...

    可调整列宽TABLE

    通过监听鼠标事件,如`mousedown`、`mousemove`和`mouseup`,我们可以创建一个拖动机制。当用户点击并拖动列边框时,JavaScript可以捕获到这些动作,计算新的列宽,并更新表格布局。此外,还需要考虑到表格的响应式...

    javascript 和HTML交互.ppt

    通过监听这些事件,可以实现表单验证、动态更新等效果。 3. **键盘和鼠标事件**:键盘事件如`keydown`、`keyup`和`keypress`,鼠标事件如`click`、`mouseover`、`mouseout`、`mousedown`和`mouseup`,它们提供了对...

    js技巧收集(200多个).txt

    此技巧利用`onMouseOver`和`onMouseOut`事件,实现在鼠标悬停时改变按钮文字的颜色,增强了交互性和视觉效果。 ### 4. 平铺按钮样式 ```html 按钮" style="border:1px solid #666666; height:17px; width:25pt; ...

Global site tag (gtag.js) - Google Analytics