js放大镜|极客笔记

js放大镜

在网页设计中，放大镜是一个常见的功能，它可以让用户在浏览商品图片或其他细节图时，能够放大部分区域以查看更清晰的细节。在本文中，我们将介绍如何使用JavaScript实现一个简单的放大镜效果。

实现思路

要实现一个放大镜效果，我们可以通过以下步骤来完成：

首先，在页面上放置一个包含原始图片的img标签。
接下来，在页面上放置一个放大区域的div标签，并设置其样式为透明。
当鼠标悬停在原始图片上时，获取鼠标相对于原始图片的位置，并将放大区域内的图片进行相应的位置偏移。
最后，在放大区域中显示被放大的部分。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="img-container">
            <img src="image.jpg" alt="Image">
            <div class="zoom-area"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.img-container {
    position: relative;
}

.zoom-area {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #ccc;
    display: none;
}

JavaScript代码

const imgContainer = document.querySelector('.img-container');
const img = document.querySelector('img');
const zoomArea = document.querySelector('.zoom-area');

imgContainer.addEventListener('mouseover', () => {
  zoomArea.style.display = 'block';
});

imgContainer.addEventListener('mouseout', () => {
  zoomArea.style.display = 'none';
});

imgContainer.addEventListener('mousemove', (e) => {
  const clientRect = img.getBoundingClientRect();
  const offsetX = e.clientX - clientRect.left;
  const offsetY = e.clientY - clientRect.top;

  const bgPosX = -offsetX * 2 + 'px';
  const bgPosY = -offsetY * 2 + 'px';

  zoomArea.style.backgroundImage = `url(' ${img.src}')`; zoomArea.style.backgroundSize = `$ {img.width * 2}px  ${img.height * 2}px`; zoomArea.style.backgroundPosition = `$ {bgPosX} ${bgPosY}`;
});