鼠标移到图片上变大显示而不是放大镜效果

鼠标移到图片上显示变大效果通常被称为“悬停放大效果”，可以通过CSS和JavaScript来实现。下面是实现该效果的完整攻略：

步骤一：准备HTML结构

首先需要在HTML中准备好要显示的图片，并为它们添加data-zoom属性，用于存放悬停后显示的图片。

示例HTML代码：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1" data-zoom="image1-zoom.jpg">
  <img src="image2.jpg" alt="Image 2" data-zoom="image2-zoom.jpg">
  <img src="image3.jpg" alt="Image 3" data-zoom="image3-zoom.jpg">
</div>

步骤二：添加CSS样式

为了实现悬停放大效果，我们需要用CSS将图片的位置定位，并将它们的尺寸变小，这样在悬停时才能恢复原来的尺寸。

示例CSS代码：

.image-container {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /*设置图片缩放后的宽度*/
  transition: all 0.5s ease;
}

img:hover {
  width: 100%; /*设置图片缩放前的宽度*/
  z-index: 999; /* 设置图片层数，让其覆盖其他元素*/
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /*添加一个黑色半透明遮罩，让图片看起来更突出*/
}

步骤三：添加JavaScript代码

为了能够在悬停时显示放大图片，我们需要将悬停事件加入进来。在每个img标签上监听mouseover事件，以获取data-zoom属性的值，然后在之前创建的<div>元素中显示相应的图片。

示例JavaScript代码：

const zoomContainer = document.createElement("div");
zoomContainer.classList.add("zoom-container");
document.body.appendChild(zoomContainer);

document.querySelectorAll("img").forEach((img) => {
  img.addEventListener("mouseover", () => {
    const imgSrc = img.getAttribute("data-zoom");
    const zoomImg = new Image();
    zoomImg.src = imgSrc;
    zoomContainer.innerHTML = "";
    zoomContainer.appendChild(zoomImg);
  });
});

示例说明

示例一：使用本地图片

准备两张图片文件，分别命名为 apple.jpg 和 apple-zoom.jpg，并放置到工程目录下的 images 目录中。
写一段 HTML 代码，用 img 标签引用这两张图片，并加上 data-zoom 属性，存储需要悬停后显示的图片的 URL。

<div class="image-container">
  <img src="./images/apple.jpg" alt="Apple" data-zoom="./images/apple-zoom.jpg">
</div>

加载上述代码所需的 CSS 和 JavaScript 文件，并在相应位置添加上述代码，便可以显示悬停后放大效果。

示例二：使用CDN中的图片

在网上选一张图片，并在不需要身份验证的 CDN 上将其放到一个共有的目录下，并获取该图片的CDN地址链接，例如：

https://cdn.example.com/images/banana.jpg

在 HTML 中使用上述链接引用图片，并设置 data-zoom 属性以存储需要悬停后显示的图片的 CDN 地址链接

<div class="image-container">
  <img src="https://cdn.example.com/images/banana.jpg" alt="Banana" data-zoom="https://cdn.example.com/images/banana-zoom.jpg">
</div>