CSS 如何创建图像放大镜

在当代数字时代，网站的视觉吸引力对于吸引用户至关重要，因此将交互和引人入胜的组件整合到您的网页中至关重要。其中一个著名的示例是图像放大镜，它允许用户放大图片以进行更仔细的检查。通过利用HTML和CSS的力量，可以制造一个简单而强大的图像放大镜，以提升用户体验并为您的网站增添精致的触感。本文将详述通过使用HTML和CSS创建图像缩放工具的必要步骤和方法，使您具备将此功能应用于自己的网页的技术专长。

方法

在本文中，我们将介绍两种不同的方法。它们如下：

滑过/跟随放大效果
放大镜效果

方法1：滑过/跟随放大效果

滑过放大的技术是一种图像处理方法，可以放大图像的一部分，而无需使用透明覆盖。这种效果可以仅通过CSS和JavaScript实现，无需任何其他工具或软件。

示例

以下是我们将在本示例中查看的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to create image magnifier using?</title>
   <style>
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
      }
      .main {
         display: flex;
      }
      .main img {
         cursor: zoom-in;
      }
      .zoom-preview {
         height: 300px;
         width: 300px;
         border: 1px solid #000;
         margin-left: 20px;
         background-repeat: no-repeat;
      }
   </style>
</head>
<body>
   <h4>How to create image magnifier using?</h4>
   <div class="main">
   <img src="https://picsum.photos/300" id="image"
   height="300px" width="300px" />
   <div class="zoom-preview"></div>
   </div>
   <script>
      const img = document.getElementById("image");
      const preview = document.querySelector(".zoom-preview");
      const calculateRatio = (value) => preview.offsetWidth / value;
      const x = calculateRatio(100);
      const y = calculateRatio(100);
      const setBackgroundProperties = (posX, posY) => {
         preview.style.backgroundImage = `url( ${img.src})`; preview.style.backgroundSize = `$ {img.width * x}px  ${img.height * y}px`; preview.style.backgroundPosition = `-$ {posX * x}px -${posY * y}px`;
      };
      img.addEventListener("mousemove", (e) => {
         const posX = e.offsetX;
         const posY = e.offsetY;
         setBackgroundProperties(posX, posY);
      });
      img.addEventListener("mouseout", () => {
         preview.style.backgroundImage = "none";
      });
   </script>
</body>
</html>

方法2：放大镜效果

这种技术产生的视觉效果可以与透明玻璃下看到的图像的放大区域的视图相比较。为了产生这种效果，我们采用了jQuery放大镜插件。这个插件是一个轻量级工具，可以方便地将缩放功能引入到图像中。在电子商务网站需要展示产品图像或者网站访问者需要放大图像而又不影响文本可见性的情况下，这是一个特别有用的功能。

示例

以下是我们将在本例中查看的完整代码−

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css"/>
   <style>
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
      }
      img{
         width: 300px;
         height: 300px;
      }
   </style>
</head>
<body>
   <h4>How to create image magnifier using?</h4>
   <img src="https://cdn.pixabay.com/photo/2012/12/27/19/40/chain-link-72864_960_720.jpg" class="zoom"
   data-magnify-src="https://cdn.pixabay.com/photo/2012/12/27/19/40/chain-link-72864_960_720.jpg" />
   <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js"></script>
   <script>
       $(document).ready(function () {$ (".zoom").magnify();
      });
   </script>
</body>
</html>

结论

总之，使用CSS和JavaScript构建图像放大器是一种简单而强大的方法，可以给您的网页注入一丝动态。通过遵循本文所述的步骤，您可以轻松将这种效果应用于自己的图像，并增加其对用户的吸引力。通过自由调整图像放大区域的大小和位置，您可以为您的网站访客生成独特而动态的体验。此外，这种技术不需要额外的软件或工具，使其成为一种经济且高效的解决方案。通过掌握这种技术，您可以为您的网页开发技能添砖加瓦，提升设计水平。