本文實例講述了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 class="box">拖拽我吧！<span class="drag"></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擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
