很简单的代码,功能还有点小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>