如何使用图像放大镜创建?

cssweb developmentfront end technology更新于 2024/9/2 9:48:17

在当今数字时代，网站的视觉吸引力对于吸引用户至关重要，因此，将引人入胜的互动元素融入网页至关重要。图像放大镜就是此类功能的一个突出例子，它允许用户放大图片以便仔细查看。利用 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 Magnify 插件。这款轻量级插件使我们能够轻松地将缩放功能融入图像中。对于需要显示产品图片的电商网站，或者网站访问者需要放大图片，且不让额外的叠加层或弹出窗口影响文本可见性的情况，此功能尤为实用。

示例

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

<!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 构建图像放大镜是一种简单而有效的方法，可以为您的网页注入一丝活力。按照本文介绍的步骤，您可以轻松地在自己的图片上实现此效果，并增强其对用户的吸引力。通过自由调整图像放大部分的大小和位置，您可以为网站访客创造独一无二且充满活力的体验。此外，此技术无需额外的软件或工具，使其成为一种经济高效的解决方案。掌握此技术，您可以为您的网页开发技能再添一笔，并将您的设计提升到新的高度。