Ez-plus 图片放大镜jQuery插件

$("#zoom_01").ezPlus();

$("#demo").ezPlus({

  container: 'ZoomContainer',

  attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom

  borderColour: '#888',

  borderSize: 4,

  constrainSize: false,  //in pixels the dimensions you want to constrain on

  constrainType: false,  //width or height

  containLensZoom: false,

  cursor: 'inherit', // user should set to what they want the cursor as, if they have set a click function

  debug: false,

  easing: false, // easing effects

  easingAmount: 12,

  enabled: true,

  // gallery options

  gallery: false,

  galleryActiveClass: 'zoomGalleryActive',

  gallerySelector: false,

  galleryItem: 'a',

  galleryEvent: 'click',

  // enable cross-fade effect

  imageCrossfade: false,

  // lens options

  lensBorderColour: '#000',

  lensBorderSize: 1,

  lensColour: 'white', //colour of the lens background

  lensFadeIn: false,

  lensFadeOut: false,

  lensOpacity: 0.4, //opacity of the lens

  lensShape: 'square', //can be 'round'

  lensSize: 200,

  lenszoom: false,

  // image loading spinner

  loadingIcon: false, //http://www.example.com/spinner.gif

  // This change will allow to decide if you want to decrease

  // zoom of one of the dimensions once the other reached it's top value,

  // or keep the aspect ratio, default behaviour still being as always,

  // allow to continue zooming out, so it keeps retrocompatibility.

  mantainZoomAspectRatio: false,

  maxZoomLevel: false,

  minZoomLevel: 1.01,

  // callbacks

  onComplete: $.noop,

  onDestroy: $.noop,

  onImageClick: $.noop,

  onImageSwap: $.noop,

  onImageSwapComplete: $.noop,

  onShow: $.noop,

  onHide: $.noop,

  onZoomedImageLoaded: $.noop,

  preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)

  respond: [],

  responsive: true,

  scrollZoom: false, //allow zoom on mousewheel, true to activate

  scrollZoomIncrement: 0.1,  //steps of the scrollzoom

  showLens: true,

  tint: false, //enable the tinting

  tintColour: '#333', //default tint color, can be anything, red, #ccc, rgb(0,0,0)

  tintOpacity: 0.4, //opacity of the tint

  touchEnabled: true,

  // zoom options

  zoomActivation: 'hover', // Can also be click (PLACEHOLDER FOR NEXT VERSION)

  zoomContainerAppendTo: 'body', //zoom container parent selector

  zoomId: -1, // identifier for the zoom container

  zoomLevel: 1, //default zoom level of image

  zoomTintFadeIn: false,

  zoomTintFadeOut: false,

  zoomType: 'window', //window is default,  also 'lens' available -

  zoomWindowAlwaysShow: false,

  zoomWindowBgColour: '#fff',

  zoomWindowFadeIn: false,

  zoomWindowFadeOut: false,

  zoomWindowHeight: 400,

  zoomWindowOffsetX: 0,

  zoomWindowOffsetY: 0,

  zoomWindowPosition: 1, //Possible values: 1-16, but we can also position with a selector string.

  zoomWindowWidth: 400,

  zoomEnabled: true, //false disables zoomwindow from showing

  zIndex: 999

});