这篇文章主要介绍了jQuery自定义图片缩放拖拽插件imageQ实现方法,涉及jQuery扩展操作及页面元素操作技巧,并附带了完整的demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法。分享给大家供大家参考，具体如下：

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

/**

 *

 * <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);

希望本文所述对大家jQuery程序设计有所帮助。