极客教程如何创建图像放大镜
介绍：每当你访问任何在线购物网站时，你一定看到过缩放效果，在这种情况下，你将光标移到图片上，可以看到该部分图片的放大视图。如果你想在你的网站上添加这个功能，那么我们可以轻松地创建这个功能。
创建的方法：有两种方法来创建一个图像放大镜。
- 翻转/跟随缩放效果
- 放大镜效果
1. 翻转/跟随缩放效果
滚动变焦效果就是简单地放大图片，看到放大的部分，没有任何透明玻璃之类的东西。我们可以用纯CSS和JS来创造这种效果。
该HTML包含2个div，第一个是有图像的主div，我们将用它来放大，第二个是缩放预览div，我们将在其中看到图像的放大部分。对于CSS代码，让我们分别讨论每个元素。首先，zoom-preview div被赋予了尺寸、边框和空白来设计它。设置background-repeat: no-repeat是很关键的，这样背景图片就不会重复。display: flex属性被应用于body，使得内容在垂直和水平方向上都能在页面的中心位置对齐。JavaScript部分包含mousemove和mouseout事件，当鼠标经过图像时放大，当鼠标离开时缩小。posX和posY的值保持鼠标指针相对于图像位置的X和Y坐标。
例子1：这个例子将说明使用HTML5的图像放大镜的完整运行代码。
<!DOCTYPE html>
<html>
<head>
<title>Image Magnifier</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>
<h1>Image Magnifier</h1>
<p>Move your mouse over the image</p>
<div class="main">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220316223348/gfg-300x300.jpg"
id="gfg-img"
height="300px" width="300px" />
<div class="zoom-preview"></div>
</div>
<script>
var img = document.getElementById("gfg-img");
var preview = document.querySelector(".zoom-preview");
//calculating the ratio by which we want to magnify the image
//you can increase or decrease it according to your requirement
var x = preview.offsetWidth / 100;
var y = preview.offsetHeight / 100;
img.addEventListener("mousemove", (e) => {
preview.style.backgroundImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/20220316223348/gfg-300x300.jpg)";
preview.style.backgroundSize = img.width * x +
"px " + img.height * y + "px";
var posX = e.offsetX;
var posY = e.offsetY;
preview.style.backgroundPosition = "-" + posX * x +
"px -" + posY * y + "px";
});
img.addEventListener("mouseout", () => {
preview.style.backgroundImage = "none";
});
</script>
</body>
</html>
输出:
2. 放大镜效果
这种效果就像你通过透明的玻璃看到了图片的一个放大部分。为了创造这个效果，我们使用了jQuery Magnify插件。Magnify是一个轻量级的jQuery插件，允许我们简单地添加图片的缩放功能。这是一个非常好的功能，可以在电子商务网站上显示产品图片，或者如果你想让人们在你的网站上放大图片，而不产生额外的覆盖或弹出窗口来遮挡你的文字。
如何使用它：
第1步：在标题中加载magnify.css，在body标签的末尾加载jquery.magnify.js，但在jQuery库之后。
<link rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css”
integrity=”sha512-wzhF4/lKJ2Nc8mKHNzoFP4JZsnTcBOUUBT+lWPcs07mz6lK3NpMH1NKCKDMarjaw8gcYnSBNjjllN4kVbKedbw==”
crossorigin=”anonymous”
referrerpolicy=”no-referrer”
/>
<script src=”https://code.jquery.com/jquery-2.2.4.min.js” integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js” integrity=”sha512-YKxHqn7D0M5knQJO2xKHZpCfZ+/Ta7qpEHgADN+AkY2U2Y4JJtlCEHzKWV5ZE87vZR3ipdzNJ4U/sfjIaoHMfw==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>
第2步：将小图片插入你的网页。data-magnify-src属性可以用来包括大图片的URL。
第3步：调用.magnify()函数。确保在第1步中的两个重要的JavaScript文件被加载后发生。
<script>
(document).ready(function() {('.zoom').magnify();
});
</script>
例子2：这个例子将说明Image Magnifier Using HTML5 with jQuery的完整运行代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Magnifier</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css"
integrity=
"sha512-wzhF4/lKJ2Nc8mKHNzoFP4JZsnTcBOUUBT+lWPcs07mz6lK3NpMH1NKCKDMarjaw8gcYnSBNjjllN4kVbKedbw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<h1>Image Magnifier</h1>
<p>Move your mouse over the image</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220322220850/gfg.jpg"
class="zoom"
data-magnify-src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220316232110/gfglarge-300x300.jpg" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js"
integrity=
"sha512-YKxHqn7D0M5knQJO2xKHZpCfZ+/Ta7qpEHgADN+AkY2U2Y4JJtlCEHzKWV5ZE87vZR3ipdzNJ4U/sfjIaoHMfw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
(document).ready(function () {
(".zoom").magnify();
});
</script>
</body>
</html>
输出:
