这篇文章主要介绍了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法,涉及jquery针对鼠标事件的响应及页面元素动态操作的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考，具体如下：
该插件是文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下：
无标题文档 拖拽我吧！
插件 jquery.dragscale.js 代码：
/* *resizable 0.1 *Dependenc jquery-1.7.1.js */ ;(function(a){ a.fn.resizable = function(options){ var defaults = { //默认参数 minW : 150, minH : 150, maxW : 500, maxH : 500, } var opts = a.extend(defaults, options); this.each(function(){ var obj = a(this); obj.mousedown(function(e){ var e = e || event; //区分IE和其他浏览器事件对象 var x = e.pageX - obj.position().left; //获取鼠标距离匹配元素的父元素左侧的距离 var y = e.pageY - obj.position().top; //获取鼠标距离匹配元素的父元素顶端的距离 $(document).mousemove(function(e){ var e = e || event; var _x = e.pageX - x; //动态获取匹配元素距离其父元素左侧的宽度 var _y = e.pageY - y; _x = _x opts.maxW ? opts.maxW : _x; //保证匹配元素的最大宽度为500px _y = _y opts.maxH ? opts.maxH : _y; obj.parent().css({width:_x,height:_y}); }).mouseup(function(){ $(this).unbind("mousemove"); //当鼠标抬起 删除移动事件 匹配元素宽高变化停止 }); }); }) } })(jQuery); 完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
以上就是jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)的详细内容，更多请关注0133技术站其它相关文章！
