放大镜js无法显示效果

#wrap {
  width: 100%;
  height: 100%;
}
#wrap .container {
  width: 1210px;
  margin: 0 auto;
  position: relative;
}
#wrap .container .small-wrap {
  position: relative;
  width: 325px;
  height: 325px;
  border: 1px solid #eee;
  position: relative;
}
#wrap .container .small-wrap img {
  width: 100%;
  height: 100%;
}
#wrap .container .small-wrap .yellow-box {
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  background: rgba(255, 0, 0, 0.3);
  position: absolute;
  left: 0;

![img](  top: 0;
  overflow: hidden;
  display: none;
  cursor: move;
}
#wrap .container .big-wrap {
  width: 470px;
  height: 470px;
  border: 1px solid #e4e4e4;
  position: absolute;
  top: 0;
  left: 325px;
  overflow: hidden;
  display: none;
}
#wrap .container .big-wrap img {
  width: 100%;
  height: 100%;
}

index.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">
    <!-- <meta name="referrer" content="no-referrer"> -->
    <title>放大镜</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div class="small-wrap">
                <div class="yellow-box"></div>
                <img src="" alt="">
            </div>
            <div class="big-wrap">
                <img src="" alt="">
            </div>
        </div>
    </div>
</body>
<script>
    var smallWrap = document.querySelector(".small-wrap");
    var yellowBox = document.querySelector(".yellow-box");
    var bigWrap = document.querySelector(".big-wrap");
    var bigImg = document.querySelector(".big-wrap img");

    yellowBox.style.width = smallWrap.clientWidth / (bigImg.clientWidth / bigWrap.clientWidth) + 'px';
    yellowBox.style.height = smallWrap.clientHeight / (bigImg.clientHeight / bigWrap.clientHeight) + 'px';
    bigWrap.style.display = 'none';

    smallWrap.addEventListener('mouseover', function () {
        yellowBox.style.display = 'block';
        bigWrap.style.display = 'block';
    });

    smallWrap.addEventListener('mouseout', function () {
        yellowBox.style.display = 'none';
        bigWrap.style.display = 'none';
    });

    smallWrap.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.parentNode.offsetLeft - (yellowBox.offsetWidth / 2);
        var y = e.pageY - this.parentNode.offsetTop - (yellowBox.offsetHeight / 2);
        var maxMove = smallWrap.offsetWidth - yellowBox.offsetWidth;
        if (x < 0) {
            x = 0;
        } else if (x > maxMove) {
            x = maxMove;
        }
        if (y < 0) {
            y = 0;
        } else if (y > maxMove) {
            y = maxMove;
        }
        yellowBox.style.left = x + 'px';
        yellowBox.style.top = y + 'px';
        var bigMaxMove = bigImg.offsetHeight - bigWrap.offsetHeight;
        bigImg.style.marginLeft = -(x / maxMove) * bigMaxMove + 'px';
        bigImg.style.marginTop = -(y / maxMove) * bigMaxMove + 'px';
    });
</script>
</html>

我的屏幕尺寸比较小，这个代码是按照b站上一个程序员媛恩予写的。但是现在出现点问题如下：大图没有放大镜效果，求解！

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

5条回答默认最新

专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-22 16:16

关注

引自免费微信小程序：皆我百晓生

看起来你想要实现的是一个鼠标悬停在小图片上时，通过放大镜查看器预览大图的部分区域。目前的问题是大图并没有随着鼠标移动进行缩放和定位。根据提供的HTML、CSS和JavaScript代码，我发现了几个可能的问题。

首先，在style属性中，你需要将换行符替换为逗号分隔的样式。然后，确保你正确地设置了src属性，以便加载实际的图像文件。另外，为了简化计算，我们可以让黄色框始终位于小图片的中心，而不是跟随鼠标移动。这样可以避免计算复杂性，并且用户仍然可以在小图片上看到放大区域。

这里是修改后的代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div class="small-wrap">
                <div class="yellow-box"></div>
                <img id="small-img" src="path/to/your/small/image.jpg" alt=""> <!-- 替换为你的小图路径 -->
            </div>
            <div class="big-wrap">
                <img id="big-img" src="path/to/your/big/image.jpg" alt=""> <!-- 替换为你的大图路径 -->
            </div>
        </div>
    </div>
</body>
<script>
    var smallWrap = document.querySelector(".small-wrap");
    var yellowBox = document.querySelector(".yellow-box");
    var bigWrap = document.querySelector(".big-wrap");
    var bigImg = document.querySelector("#big-img"); // 使用id选择器

    var smallWidth = smallWrap.clientWidth;
    var smallHeight = smallWrap.clientHeight;
    var bigWidth = bigImg.naturalWidth;
    var bigHeight = bigImg.naturalHeight;
    var ratio = Math.min(smallWidth / bigWidth, smallHeight / bigHeight);

    yellowBox.style.width = ratio * bigWidth + "px";
    yellowBox.style.height = ratio * bigHeight + "px";
    yellowBox.style.left = (smallWidth - yellowBox.offsetWidth) / 2 + "px";
    yellowBox.style.top = (smallHeight - yellowBox.offsetHeight) / 2 + "px";

    bigWrap.style.display = 'none';

    smallWrap.addEventListener('mouseover', function () {
        yellowBox.style.display = 'block';
        bigWrap.style.display = 'block';
    });

    smallWrap.addEventListener('mouseout', function () {
        yellowBox.style.display = 'none';
        bigWrap.style.display = 'none';
    });

    smallWrap.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft - (yellowBox.offsetWidth / 2);
        var y = e.pageY - this.offsetTop - (yellowBox.offsetHeight / 2);
        
        var maxMove = smallWidth - yellowBox.offsetWidth;
        if (x < 0) {
            x = 0;
        } else if (x > maxMove) {
            x = maxMove;
        }
        if (y < 0) {
            y = 0;
        } else if (y > maxMove) {
            y = maxMove;
        }

        var bigMaxMove = bigHeight - bigWrap.offsetHeight;
        bigImg.style.transform = `translate(-${x / maxMove * bigMaxMove}px, -${y / maxMove * bigMaxMove}px) scale(${ratio})`;
    });
</script>
</html>

在这个版本中，我们使用了自然宽度和高度（naturalWidth 和 naturalHeight）来获取原始图像大小，而不是依赖于元素的宽度和高度。此外，我们还优化了放大镜的位置设置，使其始终保持在小图片的中心。最后，我们更新了大图的缩放和移动方式，使用CSS的transform属性来实现更平滑的效果。

确保替换成正确的图片路径，这应该会解决你的问题。如果你还有其他疑问，请随时告诉我。

编辑记录

报告相同问题？

关注问题

JavaScript实现放大镜效果代码示例
2020-10-15 09:36

JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
H5+JS+CSS模仿JD商品详情页放大镜效果
2021-12-06 21:20

在本项目中，我们将探讨如何使用HTML5、JavaScript（JS）和CSS来创建一个类似于京东（JD）商品详情页面的放大镜效果。这个效果允许用户在鼠标悬停或移动时，通过一个放大镜视图查看商品图片的细节，增强用户体验。 ...
用js实现放大镜的效果的简单实例
2020-10-22 07:35

本实例将介绍如何使用纯JavaScript来实现一个简单的放大镜效果。 ### HTML结构首先，我们需要一个基本的HTML结构来承载图片和放大镜效果。在给定的代码中，我们有三个主要元素： 1. `box`：这是放大镜效果的主要...
原生js仿淘宝网商品放大镜效果
2020-10-20 07:42

原生JavaScript实现商品放大镜效果是前端开发中常见的一种交互效果，其核心功能是通过鼠标悬停在商品缩略图上，显示一个放大后的商品视图。这在电商网站中尤其常见，有助于消费者更好地观察商品细节。以下是从提供的...
使用js实现放大镜效果案例
2022-03-27 15:15

3. `big.js` - 这是JavaScript文件，包含实现放大镜效果的代码。主要任务是监听鼠标移动事件，计算放大区域的位置，并更新放大镜中的显示。 4. `big.css` - CSS文件，负责样式设定，包括图片和放大镜容器的样式，...
js放大镜放大购物图片效果
2020-10-20 14:51

文章主要介绍了如何使用JavaScript技术来实现一个购物网站中放大镜效果的功能。这种效果可以让用户在浏览商品图片时，通过移动鼠标来查看图片的放大区域，从而提供更好的用户体验。在实现这个功能的过程中，文章重点...
vue3+vite+ts 仿淘宝放大镜效果
2022-09-17 17:08

5. **鼠标悬停放大**：放大镜效果主要是在鼠标悬停在图片上时，显示出一个放大版的图像。这需要处理鼠标移动事件，计算鼠标相对于图片的位置，然后根据这个位置动态调整放大区域的显示。通常会使用CSS3的transform...
图片放大镜效果代码
2020-10-30 14:40

首先，JavaScript作为前端开发的核心技术之一，是实现图片放大镜效果不可或缺的编程语言。JavaScript提供了丰富的API和事件处理机制，通过它我们可以监听用户的交互行为，并对图片进行动态的处理和显示。其次，DOM...
淘宝商品放大镜效果代码
2024-10-06 14:34

实现这种放大镜效果的方式有多种，包括前端技术如JavaScript、CSS、HTML5等，也可以通过后端技术，例如PHP、Python等，生成相应的图片或者数据。但是，目前最为流行的实现方式，是通过JavaScript结合CSS来实现的，...
HTML+css+JavaScript实现放大镜效果
2017-09-07 14:57

在网页设计中，实现放大镜效果可以为用户提供更好的产品预览体验，特别是在电商网站上，用户可以通过放大镜功能查看商品的细节。这个效果通常由HTML、CSS和JavaScript三者结合来实现。接下来，我们将深入探讨如何...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 4月22日

放大镜js无法显示效果

5条回答 默认 最新

问题事件

5条回答默认最新