如何使用 jQuery 创建自定义图像放大镜？

图像放大镜一览：

图像放大镜是光标点的缩放功能。您将光标放在定义 div 的位置，图像将以缩放模式弹出。就像在购物网站上一样，当您想购买任何一种布料并想检查该产品的材料或详细打印时，此功能非常有用。要创建图像放大镜，我们将使用 zoom()函数。有一篇类似的文章如何使用 JavaScript 放大和缩小图像？这将放大整个图片。

我们将使用 jQuery 构建一个图像放大镜。以下是我们希望您在开始开发之前具备一些基本知识的一些先决条件：

• HTML
• CSS
• jQuery
• 引导程序

方法：使用jQuery offset() 获取页面坐标和鼠标位置，获取光标相对于元素的相对位置。将外部容器显示属性设置为block/inline-block以便图像在缩放时永远不会溢出。每当触发缩放时，设置相对于容器的顶部/左侧位置。我们将需要校准图像缩放，这在不同的用例中相对于容器需要时间。因此，出于同样的原因，我们将使用一个名为jQuery zoom的简单 jQuery 核心插件，它为我们节省了大量时间。

创建结构：在本节中，我们将创建一个基本结构。首先，我们将进行页面布局

• 用于制作结构的 HTML 代码：

    
  
      
      
      
      
      
      
      
      
      
       
  
    
  
      
          GeeksforGeeks
      
      
          Move your Cursor Over the Image
          
              
          
    
          
              
          
      
  
    

设计结构：在上一节中，我们已经创建了将要使用放大镜的基本布局的结构。

• CSS 代码结构：在本节中，我们将设计布局添加一些必要的 CSS 配置所需的相同。在容器中应用的样式属性可确保图像永远不会溢出容器外，永远不会溢出指定边界之外。请参阅以下示例以了解更多详细信息。

• 添加 jQuery 脚本：现在我们将初始化 jQuery 脚本。语法在下面突出显示：

  $([Selector to Parent element of Image]).zoom({Attributes});
  $([Image]).parent().zoom({attributes});

      $(document).ready(function() {
     
          $('.parent').css('width', $('img').width());
     
          $('img').parent().zoom({
              magnify: 4,
              target: $('.contain').get(0)
          });
      });

  使用图像的父元素作为选择器的原因：根据 Git-hub 存储库文档，很难从 JavaScript/jQuery 读取一些与 CSS 样式相关的布局，因此我们在这里使用父元素来做同样的事情，这是同时还充当图像的包装器。

  zoom()函数的属性：

  Property	Default	Description
  on	‘mouseover’	Event to be used for triggering the zoom. Options: mouseover, grab, click, toggle
  duration	120	Speed for fading effects.
  target	false	Selector/DOM element to be used as parent container for the zoomed image.
  touch	true	Enables interaction using Touch.
  magnify	1	Entered value is multiplied with image resolution for zooming.
  callback	false	Function called when the image has loaded.
  onZoomIn	false	Function called when the image has zoomed in.
  onZoomOut	false	Function called when the image has zoomed out.

  组合 HTML、CSS 和 jQuery 代码：这是组合上述部分后的最终代码。

    
  
      
      
      
      
      
      
      
      
      
      
    
      
          body {
              margin: 20px;
          }
          h1 {
              color: green;
          }
          .container {
              display: block;
              padding: 0px;
          }
            
          .contain {
              position: fixed;
              right: 15%;
              top: 15%;
              width: 200px;
              height: 220px;
          }
            
          img {
              width: 300px;
              height: 240px;
          }
      
  
    
  
      
          GeeksforGeeks
      
      
          Move your Cursor Over the Image
          
              
          
    
          
          
      
      
    
      
          $(document).ready(function() {
    
              $('.parent').css('width', $('img').width());
    
              $('img')
                  .parent()
                  .zoom({
                      magnify: 4,
                      target: $('.contain').get(0)
                  });
          });
      
  
    
              

  输出：