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