本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考，具体如下：
该插件是文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0;padding:0;} .box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;} .drag{position:absolute;bottom:3px;right:3px;display:block;width:7px;height:7px;background:url(scale.png) no-repeat} </style> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery.resizable.js"></script> </head> <body> <div>拖拽我吧！<span></span></div> <script> $(function(){ $(".drag").resizable({ minW : 150, minH : 150, maxW : 500, maxH : 500, }); }) </script> </body> </html>
插件 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.minW ? opts.minW : _x; //保证匹配元素的最小宽度为150px _x = _x > opts.maxW ? opts.maxW : _x; //保证匹配元素的最大宽度为500px _y = _y < opts.minH ? opts.minH : _y; _y = _y > opts.maxH ? opts.maxH : _y; obj.parent().css({width:_x,height:_y}); }).mouseup(function(){ $(this).unbind("mousemove"); //当鼠标抬起 删除移动事件 匹配元素宽高变化停止 }); }); }) } })(jQuery);
完整实例代码点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。
【jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)】相关文章：
★ jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
★ jQuery实现控制文字内容溢出用省略号(…)表示的方法