DOM元素移动缩放jQuery插件

define([ "jquery", "plugins/jquery.panzoom" ], function( $ ) {

  $(document).ready(function() {

    $(".panzoom-elements").panzoom();

  });

});

$(".panzoom-elements").panzoom();

// Pass options

$("a.panzoom-elements").panzoom({

  minScale: 0,

  $zoomRange: $("input[type='range']")

});

Panzoom.defaults = {

  // Should always be non-empty

  // Used to bind jQuery events without collisions

  // A guid is not added here as different instantiations/versions of Panzoom

  // on the same element is not supported.

  eventNamespace: ".panzoom",

  // Whether or not to transition the scale

  transition: true,

  // Default cursor style for the element

  cursor: "move",

  // There may be some use cases for zooming without panning or vice versa

  // NOTE: disablePan also disables focal point zooming

  disablePan: false,

  disableZoom: false,

  // The increment at which to zoom

  // adds/subtracts to the scale each time zoomIn/Out is called

  increment: 0.3,

  minScale: 0.4,

  maxScale: 5,

  // The default step for the range input

  // Precendence: default < HTML attribute < option setting

  rangeStep: 0.05,

  // Animation duration (ms)

  duration: 200,

  // CSS easing used for scale transition

  easing: "ease-in-out",

  // Indicate that the element should be contained within it's parent when panning

  // Note: this does not affect zooming outside of the parent

  // Set this value to 'invert' to only allow panning outside of the parent element (the opposite of the normal use of contain)

  // 'invert' is useful for a large Panzoom element where you don't want to show anything behind it

  contain: false,

  // Transform value to which to always reset (string)

  // Defaults to the original transform on the element when Panzoom is initialized

  startTransform: undefined,

  // This optional jQuery collection can be set to specify all of the elements

  // on which the transform should always be set.

  // It should have at least one element.

  // This is mainly used for delegating the pan and zoom transform settings

  // to another element or multiple elements.

  // The default is the Panzoom element wrapped in jQuery

  // See the [demo](http://timmywil.github.io/jquery.panzoom/demo/#set) for an example.

  // Note: only one Panzoom element will still handle events for a Panzoom instance.

  // Use multiple Panzoom instances for that use case.

  $set: $elem,

  // Zoom buttons/links collection (you can also bind these yourself - e.g. `$button.on("click", function( e ) { e.preventDefault(); $elem.panzoom("zoomIn"); });` )

  $zoomIn: $(),

  $zoomOut: $(),

  // Range input on which to bind zooming functionality

  $zoomRange: $(),

  // Reset buttons/links collection on which to bind the reset method

  $reset: $(),

  // For convenience, these options will be bound to Panzoom events

  // These can all be bound normally on the Panzoom element

  // e.g. `$elem.on("panzoomend", function( e, panzoom ) { console.log( panzoom.getMatrix() ); });`

  onStart: undefined,

  onChange: undefined,

  onZoom: undefined,

  onPan: undefined,

  onEnd: undefined,

  onReset: undefined

};