jQuery图片缩放拖拽插件 imageQ

综合网上一些代码 自己写的一个图片缩放拖拽的小插件

 

/** * * jQuery imageQ plugin * @name jquery-imageQ.js * @author Q * @date 2011-01-19 * maxRatio 最大放大比例 * minRatio 最小缩小比例 * changeRadio 每次变化幅度 * picUrl:图片地址, * picWidth:图片宽度, * picHeight:图片高度, * reset:是否重设图片 * */(function($){var status = false;$.fn.imageQ = function(options){var defaults = {maxRatio:4,minRatio:4,changeRadio:0.2,picUrl:'',picWidth:306,picHeight:372,reset:false}var options=jQuery.extend(defaults,options);return this.each(function(){status = true;$(this).attr('src','');$(this).attr('src',options.picUrl);var naturalwidth = options.picWidth;var naturalheight = options.picHeight;var minwidth = Math.round(naturalwidth/options.minRatio);var minheight = Math.round(naturalheight/options.minRatio);var maxwidth = Math.round(naturalwidth*options.maxRatio);var maxheight = Math.round(naturalheight*options.maxRatio);if(options.reset){$("#wrapDiv").css("width",naturalwidth+"px");$("#wrapDiv").css("height",naturalheight+"px");$("#wrapDiv").css("top",'0px');$("#wrapDiv").css("left",'0px');}else{$(this).css("width","100%");$(this).css("height","100%");$(this).wrap("<div id='wrapDiv' style='-moz-user-select: none;width:"+naturalwidth+"px;height:"+naturalheight+"px;cursor:move;position:relative;top:0px;left:0px;visibility: visible;' ondragstart='return false;' onselectstart='return false;'></div>");$("#wrapDiv").before('<div style="visibility: visible; height: 26px; width: 78px; display: block; position: absolute; line-height: 1px; cursor: pointer; left: 0px; top: 0px;z-index:1;"><div id="plusTool"></div><div id="minusTool"></div><div id="moveTool"></div></div>');//$("#wrapDiv").append('<div style="display: block; position: relative; left: 0px; top: 0px; width: 100%; height: 100%; -moz-user-select: none;" id="uploaduserpng"></div>');$("#plusTool").attr('title','放大');$("#minusTool").attr('title','缩小');$("#moveTool").attr('title','拖动');$("#plusTool").bind("click",function(){_changeOperate('plus');});$("#minusTool").bind("click",function(){_changeOperate('minus');});$("#moveTool").bind("click",function(){_changeOperate('move');});function plusOperate(){$("#wrapDiv").unbind();$("#wrapDiv").unbind();$("#wrapDiv").bind("click",function(){var h = $("#wrapDiv").height();var w = $("#wrapDiv").width();if(Math.round(h*(1+options.changeRadio)) >= maxheight){var newH = maxheight;}else{var newH = Math.round(h*(1+options.changeRadio));}if(Math.round(w*(1+options.changeRadio)) >= maxwidth){var newW = maxwidth;}else{var newW = Math.round(w*(1+options.changeRadio));}$("#wrapDiv").css("width",newW+"px");$("#wrapDiv").css("height",newH+"px");});}function minusOperate(){$("#wrapDiv").unbind();$("#wrapDiv").unbind();$("#wrapDiv").bind("click",function(){var h = $("#wrapDiv").height();var w = $("#wrapDiv").width();if(Math.round(h*(1-options.changeRadio)) <= minheight){var newH = minheight;}else{var newH = Math.round(h*(1-options.changeRadio));}if(Math.round(w*(1-options.changeRadio)) <= minwidth){var newW = minwidth;}else{var newW = Math.round(w*(1-options.changeRadio));}$("#wrapDiv").css("width",newW+"px");$("#wrapDiv").css("height",newH+"px");});}function moveOperate(){$("#wrapDiv").unbind();var _move = false;var _x,_y;$("#wrapDiv").bind("mousedown",function(e){_setCursor('grabbing');_move = true;if(!document.all){_x = e.pageX - parseInt($("#wrapDiv").css("left"));_y = e.pageY - parseInt($("#wrapDiv").css("top"));}else{var pagex = e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);var pagey = e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);_x = pagex - parseInt($("#wrapDiv").css("left"));_y = pagey - parseInt($("#wrapDiv").css("top"));}});$("#wrapDiv").bind("mouseup",function(e){_setCursor('grab');_move = false;});$("#wrapDiv").bind("mousemove",function(e){if(_move){if(!document.all){var pagex = e.pageX;var pagey = e.pageY;}else{var pagex = e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);var pagey = e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);}var x = pagex-_x;var y = pagey-_y;$("#wrapDiv").css("top",y);$("#wrapDiv").css("left",x);}});}function _setCursor(type){$("#wrapDiv").css("cursor","url('images/cursors/"+type+".cur'),default");}function _changeOperate(operate){if(operate == 'plus'){_setCursor('zoom-in');plusOperate();}if(operate == 'minus'){_setCursor('zoom-out');minusOperate();}if(operate == 'move'){_setCursor('grab');moveOperate();}}}});};$.fn.imageQ.getStatus = function(){return status;};})(jQuery);

 

 

 

示例 及css 图片资源下载地址：

http://download.csdn.net/source/2995968