Doublezoom是一个全新的图像缩放jQuery插件，允许您放大和比较图像的不同区域。

它提供了一种直观的方式来查看单个图像的多个详细视图以进行比较，这在医学和视觉艺术等许多领域都很有用。

工作原理：

• 第一次单击鼠标将在窗口1中显示图像当前区域的详细视图。
• 第二次鼠标单击将在窗口2中显示图像区域的另一个详细视图。
• 第三次点击鼠标将重置插件。

如何使用它:

1.在文档中下载并加载jQuery Doublezoom插件的文件。

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery doublezoom plugin -->
<link rel="stylesheet" href="/path/to/doublezoom.css" />
<script src="/path/to/doublezoom.js"></script>

2.您可能需要imagesLoaded jQuery插件来检测图像是否已加载。

<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>

3.图像缩放区域所需的HTML结构。

<div class="doublezoom-container">
  <div class="doublezoom-image">
    <div class="box">
      <!-- Replace Your Image Here -->
      <img
        id="myimage"
        width="540"
        src="autumn-forest.jpg"
        class="img-fluid"
        alt="..."
      />
    </div>
  </div>
  <div class="doublezoom-landing">
    <div class="doublezoom-landing-left"></div>
    <div class="doublezoom-landing-right"></div>
  </div>
</div>

4.初始化图像上的插件。就是这样。

$('.doublezoom-container').imagesLoaded( function() {
  $("#myimage").doublezoom();
});

预览截图

缩放和比较图像 不同区域 jQuery Doublezoom