Extended Magnify是一个简单但完全可定制的jQuery图像缩放插件，它为您的图像提供流畅的悬停缩放和内部缩放体验。

非常适合电子商务网站和网店，顾客可以在购买前放大并查看商品的详细信息。也有助于设计/摄影作品集，展示高分辨率图像的辉煌。

如何使用它:

1.包括扩展放大jQuery插件的缩小版。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/extm.min.js"></script>

2.调用函数外部在目标图像上，插件将完成其余工作。

<img class="example" src="1.jpg" />

$('.example').extm();

3.将放大后的图像放入指定的容器中。

$('.example').extm({
  zoomElement:$('.anotherEle'),
});

4.重新定位放大的图像。

$('.example').extm({
  position: 'right',
  rightPad: 20,
});

5.在图像中显示一个可以用鼠标移动的放大镜。

$('.example').extm({
  squareOverlay: true,
});

6.指定图像的大版本的路径。

$('.example').extm({
  imageSrc: '1-full.jpg',
  // enable lazy load
  lazy: true,
});

7.自定义缩放级别。

$('.example').extm({
  zoomLevel: 1,
});

8.设置放大图像的宽度。

$('.example').extm({
  zoomSize: 1000,
});

9.所有默认插件选项。

$('.example').extm({
  zoomElement: false,
  imageSrc: $(this).attr('src'),
  squareOverlay: false,
  position: false,
  rightPad: 0,
  lazy: false,
  zoomLevel: 1,
  zoomSize: false,
  loadingText: false,
  loadingImage: false,
});

10.更新图像URL。

$('.example').extmImageUpdate('new.jpg');

11.销毁插件。

$('.example').extmDestroy();

预览截图

高级悬停缩放插件 jQuery扩展放大