JS放大镜效果代码详解|极客笔记

JS放大镜效果代码详解

在网页设计中，放大镜效果是一种常见的交互设计，可以帮助用户更清晰地查看图片细节。通过使用JavaScript，我们可以实现一个简单的放大镜效果，使用户能够在鼠标悬停在图片上时，通过放大镜来查看图片的细节。本文将详细解释如何使用JavaScript实现这一效果。

实现原理

放大镜效果的原理很简单，即在原始图片上放置一个放大镜框，当鼠标悬停在图片上时，放大镜框显示出被放大的部分。具体实现步骤如下：

在页面中添加一个包含原始图片的容器；
当鼠标悬停在图片容器上时，显示放大镜框；
当鼠标在图片容器上移动时，根据鼠标位置计算放大镜框的位置，并更新放大镜框中显示的图片；
当鼠标移出图片容器时，隐藏放大镜框。

HTML结构

首先，我们需要在HTML中添加一个包含原始图片的容器，并给容器和图片设置相应的ID和类名，如下所示：

<div id="image-container">
    <img src="image.jpg" id="original-image" class="img">
    <div id="zoom-box" class="zoom-box"></div>
</div>

在这里，我们添加了一个ID为image-container的容器，其中包含了一个ID为original-image的原始图片和一个ID为zoom-box的放大镜框。

CSS样式

接下来，我们需要通过CSS样式来设置图片容器和放大镜框的样式，以及鼠标悬停在图片上时的效果。下面是相应的CSS样式代码：

#image-container {
    position: relative;
}

.img {
    display: block;
    width: 200px;
    height: auto;
}

.zoom-box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid #000;
    display: none;
}

在这段CSS样式中，我们设置了图片容器的样式为相对定位，放大镜框的样式为绝对定位，并将其隐藏起来。

JavaScript代码

最后，我们使用JavaScript来实现放大镜效果。首先，我们需要获取页面中的图片容器、原始图片和放大镜框元素，然后通过鼠标事件来实现放大镜的显示和隐藏，并实现放大镜的移动效果。下面是完整的JavaScript代码：

const container = document.getElementById('image-container');
const originalImage = document.getElementById('original-image');
const zoomBox = document.getElementById('zoom-box');

container.addEventListener('mouseenter', function() {
    zoomBox.style.display = 'block';
});

container.addEventListener('mouseleave', function() {
    zoomBox.style.display = 'none';
});

container.addEventListener('mousemove', function(e) {
    const rect = container.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    let offsetX = x - zoomBox.offsetWidth / 2;
    let offsetY = y - zoomBox.offsetHeight / 2;

    if (offsetX < 0) {
        offsetX = 0;
    }
    if (offsetY < 0) {
        offsetY = 0;
    }
    if (offsetX > originalImage.width - zoomBox.offsetWidth) {
        offsetX = originalImage.width - zoomBox.offsetWidth;
    }
    if (offsetY > originalImage.height - zoomBox.offsetHeight) {
        offsetY = originalImage.height - zoomBox.offsetHeight;
    }

    zoomBox.style.left = offsetX + 'px';
    zoomBox.style.top = offsetY + 'px';

    zoomBox.style.backgroundImage = `url( ${originalImage.src})`; zoomBox.style.backgroundSize = `$ {originalImage.width * 2}px  ${originalImage.height * 2}px`; zoomBox.style.backgroundPosition = `-$ {offsetX * 2}px -${offsetY * 2}px`;
});

在这段代码中，我们首先获取了图片容器、原始图片和放大镜框元素，并通过addEventListener方法为图片容器添加mouseenter、mouseleave和mousemove事件处理程序。当鼠标悬停在图片容器上时，放大镜框显示出来；当鼠标移出时，放大镜框隐藏。在鼠标移动时，根据鼠标位置计算放大镜框的位置，并更新放大镜框中显示的图片以及背景位置，实现放大镜效果。