放大镜案例-CSDN博客

本文链接：https://blog.csdn.net/weixin_66035493/article/details/130229493

该代码示例展示了如何通过CSS和JavaScript实现图片预览功能。当鼠标移入小图片时，会出现一个半透明的遮挡层（小Div）和一个大Div用于显示放大的图片。鼠标在小图片上的移动会相应地改变大图片的展示位置，提供类似缩放预览的效果。当鼠标移出小图片时，这两个Div会隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css部分

* {
        margin: 0;
        padding: 0;
      }
      #smallImg {
        width: 300px;
        height: 300px;
        background-image: url(./lou.jpg);
        background-size: cover;
      }
      #smallDiv {
        width: 100px;
        height: 100px;
        background-color: rgba(255, 0, 0, 0.2);
        display: none;
        position: absolute;
      }

      #bigDiv {
        width: 300px;
        height: 300px;
        /* border: 1px solid red; */
        position: absolute;
        left: 300px;
        top: 0px;
        overflow: hidden;
        display: none;
      }

      #bigImg {
        width: 900px;
        height: 900px;
        position: absolute;
        margin: 10px;
      }

html部分

<div class="fang">
      <div id="smallImg">
        <div id="smallDiv"></div>
      </div>

      <div id="bigDiv">
        <img src="./lou.jpg" alt="" id="bigImg" />
      </div>
    </div>

js部分

 // 逻辑：
      // 1.鼠标移入，出现小div（遮挡层）和大div（展示效果区域）
      // 鼠标移出，隐藏小div、大div 属性值

      let smallImg = document.getElementById("smallImg");
      let smallDiv = document.getElementById("smallDiv");
      let bigDiv = document.getElementById("bigDiv");
      let bigImg = document.getElementById("bigImg");

      //当鼠标移入小图时
      smallImg.onmouseover = function () {
        smallDiv.style.display = "block";
        bigDiv.style.display = "block";
      };

      //当鼠标移出小图时
      smallImg.onmouseout = function () {
        smallDiv.style.display = "none";
        bigDiv.style.display = "none";
      };

      //当鼠标在小图上移动时
      smallImg.onmousemove = function (e) {
        // 如果e存在，就将e赋值为e，否则将window.event赋值给e
        var e = e || window.event;

        //获取鼠标相对于小图的位置
        var x = e.clientX - 100;
        var y = e.clientY - 100;

        //对移动范围进行判断
        // 鼠标移动距离大于 遮挡层的移动距离
        //如果x大于等于200，就将x设为200
        if (x >= 200) {
          x = 200;
        }
        if (x <= 0) {
          x = 0;
        }
        if (y >= 200) {
          y = 200;
        }
        if (y <= 0) {
          y = 0;
        }

        //设置遮挡层的位置
        smallDiv.style.left = x + "px";
        smallDiv.style.top = y + "px";

        //根据尺寸 小图/大图
        //设置大图的位置
        bigImg.style.left = -3 * x + "px";
        bigImg.style.top = -3 * y + "px";
      };