jquery Custom Picture Scaling drag-and-drop plug-in Imageq implementation method (with demo source download) _jquery

This example describes the jquery custom picture scaling drag-and-drop plug-in Imageq implementation method. Share to everyone for your reference, specific as follows:

Integrated online Some code yourself write a picture scaling drag-and-drop widget

/** * * <a href= "HTTP://LIB.CSDN.NET/BASE/22" class= ' Replace_word ' title= ' jquery Knowledge base ' target= ' _blank ' style= ' df3434; Font-weight:bold; ' >jQuery</a> Imageq Plugin * @name jquery-imageq.js * @author Q * @date 2011-01-19 * maxratio maximum magnification * Minrat
  IO Minimum narrowing ratio * Changeradio per change amplitude * Picurl: Picture address, * picwidth: Picture width, * picheight: Picture height, * Reset: Whether to reset the picture * */function ($) {
  var status = false; $.fn.imageq = function (options) {var defaults = {Maxratio:4, minratio:4, changeradio:0.2, pic
    URL: ', 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&Gt;<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 ', ' enlarge ');
        $ ("#minusTool"). attr (' title ', ' Shrink ');
        $ ("#moveTool"). attr (' title ', ' drag ');
        $ ("#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 = Maxwid
              Th
              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 = Minwid
              Th
              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.d
                OcumentElement.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);
        }
          });
        The function _setcursor (type) {$ ("#wrapDiv"). CSS ("cursor", "url (' images/cursors/" +type+ ". Cur '), default"); } function _changeoperate (operate) {if (operate = = ' plus ') {_SETCU
            Rsor (' zoom-in ');
          Plusoperate ();
            } if (operate = = ' minus ') {_setcursor (' zoom-out ');
          Minusoperate ();
            } if (operate = = ' move ') {_setcursor (' grab ');
          Moveoperate ();
  }
        }
      }
    });
  };
  $.fn.imageq.getstatus = function () {return status;
};

 }) (JQuery);

Full instance code click here to download the site.

PS: In this small series for you to recommend several JavaScript format landscaping tools, I believe that in future development can be used:

C Language Style/html/css/json code formatting landscaping Tools:
Http://tools.jb51.net/code/ccode_html_css_json

Online JavaScript code Landscaping, formatting tools:
Http://tools.jb51.net/code/js

JavaScript code Landscaping/compression/formatting/encryption Tools:
http://tools.jb51.net/code/jscompress

Online JSON code inspection, inspection, landscaping, formatting tools:
Http://tools.jb51.net/code/json

JSON code online Format/beautify/compress/edit/Convert tools:
Http://tools.jb51.net/code/jsoncodeformat

More interested readers of jquery-related content can view the site: "jquery common Plug-ins and Usage summary", "jquery table (table) Operation Tips Summary", "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery Ajax Usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.