jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)

/** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery</a> 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);