极客教程如何使用jQuery创建一个自定义图像放大镜
图像放大镜预览：
图像放大器是你的光标点的缩放能力。你将光标放置在定义div中的地方，图像将以缩放模式弹出。就像在购物网站上，当你想购买任何种类的布，并想详细检查该产品的材料或印刷品时，这个功能很有用。为了创建一个图像放大镜，我们将使用zoom()函数。有一篇类似的文章是关于如何使用JavaScript放大和缩小图片的，它将放大整个图片。
我们将使用jQuery建立一个图像放大镜。下面是一些先决条件，我们希望你在开始开发之前有一些基本知识。
方法：使用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>
输出:
