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

这篇文章主要介绍了jQuery实现右下角可缩放大小的层,以完整实例形式分析了jQuery页面元素及相关样式属性操作技巧,需要的朋友可以参考下

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

    #fa{ border:1px solid blue; overflow:auto; width:400px; height:400px; } #main{ margin:0; padding:0; width:300px; height:280px; border:1px solid red; }   

函数封装后：

 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 && posxot && posy=ol && posx=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程序设计有所帮助。

以上就是jQuery实现右下角可缩放大小的层完整实例的详细内容，更多请关注本站其它相关文章！