jQuery实现右下角可缩放大小的层完整实例

本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考，具体如下：

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>大小可缩放层测试</title><script type = "text/javascript" src="jquery-1.7.2.js"></script><style type = "text/css">#fa{border:1px solid blue;overflow:auto;width:400px;height:400px;}#main{margin:0;padding:0;width:300px;height:280px;border:1px solid red;}</style><script type = "text/javascript">$（function（）{var div = getObj（"main"）;div.onmousemove = function（e）{var e = e || window.event;var posx = e.clientX;var posy = e.clientY;var l = div.offsetLeft;var t = div.offsetTop;var h = div.clientHeight;var w = div.clientWidth;var ol = l+w-10;var or = l+w+10;var ot = t+h-10;var ob = t+h+10;this.style.cursor = "";if（posx>ol && posx<or && posy >ot && posy<ob）{div.style.cursor = "nw-resize";}}div.onmousedown = function（e）{var e = e || window.event;var initX = e.clientX;var initY = e.clientY;var l = div.offsetLeft;var t = div.offsetTop;var h = div.clientHeight;var w = div.clientWidth;var ol = l+w-10;var or = l+w+10;var ot = t+h-10;var ob = t+h+10;if（initX>ol && initX<or && initY >ot && initY<ob）{document.onmousemove = function（evt）{var e = evt || window.event;var currX = e.clientX;var currY = e.clientY;div.style.width = w + （currX - initX）+"px";div.style.height = h+（currY-initY）+"px";}document.onmouseup = function（）{document.onmousemove = null;document.onmouseup = null;}}}}）;function getObj（id）{return document.getElementById（id）;}</script></head><body><div id = "fa"><div id = "main"></div></div></body></html>

函数封装后：

function resize（div）{div.mousemove（function（e）{var e = e || window.event;var posx = e.clientX;var posy = e.clientY;var l = div.offset（）.left;var t = div.offset（）.top;var h = div.height（）;var w = div.width（）;var ol = l+w-10;var or = l+w+10;var ot = t+h-10;var ob = t+h+10;$（this）.css（"cursor",""）;if（posx>ol && posx<or && posy >ot && posy<ob）{$（this）.css（"cursor","nw-resize"）;}}）;div.mousedown（function（e）{var e = e || window.event;var posx = e.clientX;var posy = e.clientY;var l = div.offset（）.left;var t = div.offset（）.top;var h = div.height（）;var w = div.width（）;var ol = l+w-10;var or = l+w+10;var ot = t+h-10;var ob = t+h+10;if（posx>=ol && posx<=or && posy >=ot && posy<=ob）{document.onmousemove = function（e）{var e = e || window.event;var currX = e.clientX;var currY = e.clientY;div.width（w + （currX - posx））;div.height（h+（currY-posy））;}$（document）.mouseup（function（）{document.onmousemove = null;}）;}}）;}

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格（table）操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。