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

图像放大镜预览：
如何使用jQuery创建一个自定义图像放大镜？

图像放大器是你的光标点的缩放能力。你将光标放置在定义div中的地方，图像将以缩放模式弹出。就像在购物网站上，当你想购买任何种类的布，并想详细检查该产品的材料或印刷品时，这个功能很有用。为了创建一个图像放大镜，我们将使用zoom()函数。有一篇类似的文章是关于如何使用JavaScript放大和缩小图片的，它将放大整个图片。

我们将使用jQuery建立一个图像放大镜。下面是一些先决条件，我们希望你在开始开发之前有一些基本知识。

HTML
CSS
jQuery
Bootstrap

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

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

HTML代码来做结构。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    
    <!-- Required CDN's -->
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
    </script> 
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
    <div class="container-fluid">
        <b>Move your Cursor Over the Image</b>
        <div class="parent">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200112021554/maxresdefault7.jpg">
        </div>
  
        <span class="contain">
            <!-- Into another container -->
        </span>
    </div>
</body>
  
</html>

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

结构的CSS代码。在这一节中，我们将设计布局添加一些必要的CSS配置，以做到这一点。在容器中应用样式属性，以确保图像永远不会溢出容器之外，永远不会溢出指定的边界。请参考下面的例子以了解更多细节。

<style>
    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;
    }
</style>

添加jQuery脚本。现在我们将初始化jQuery脚本。语法强调如下。

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

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

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

缩放()函数的属性：

属性	默认	描述
on	‘mouseover’	用于触发缩放的事件。选项：鼠标移动、抓取、点击、切换
duration	120	褪色效果的速度。
target	false	选择器/DOM元素，作为缩放图像的父级容器。
touch	true	启用使用触摸的互动。
magnify	1	输入的值与图像分辨率相乘，用于缩放。
callback	false	当图像加载完毕后调用的函数。
onZoomIn	false	当图像放大时调用的函数。
onZoomOut	false	当图像变小时调用的函数。

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

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    
    <!-- Required CDN's -->
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
    </script>
  
    <style>
        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;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
    <div class="container-fluid">
        <b>Move your Cursor Over the Image</b>
        <div class="parent">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200112021554/maxresdefault7.jpg">
        </div>
  
        <span class="contain">
        <!-- Into another container -->
    </span>
    </div>
  
    <script>
        (document).ready(function() {
  
            ('.parent').css('width', ('img').width());
  
            ('img')
                .parent()
                .zoom({
                    magnify: 4,
                    target: $('.contain').get(0)
                });
        });
    </script>
</body>
  
</html>