当前位置: 代码迷 >> Web前端 >> TD兑现鼠标Resize效果.
  详细解决方案

TD兑现鼠标Resize效果.

热度:105   发布时间:2012-09-10 11:02:32.0
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>
  相关解决方案