放大镜案例

news/2025/2/23 12:18:02

一、Html的搭建

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 页面元信息及样式 -->
  </head>
  <body>
    <div class="camera">
      <!-- 小图 -->
      <div class="cameraImg">
        <img src="./img0.jpg" alt="" />
      </div>
      <!-- 放大镜 -->
      <div class="zoom"></div>
      <!-- 大图 -->
      <div class="bDiv">
        <img src="./img1.jpg" alt="" class="bImg" />
      </div>
    </div>
    <!-- 引入 js -->
    <script>
      // JavaScript 代码
    </script>
  </body>
</html>

二、对Html加入CSS页面样式进行页面渲染

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 小图 */
      .camera {
        width: 300px;
        height: 300px;
        position: relative;
        border: 1px solid black;
      }

      .cameraImg img {
        width: 300px;
        height: 300px;
      }
      /* 遮罩层 */
      .zoom {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        opacity: 0.8;
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
      }
      /* 大图 */

      .bDiv {
        width: 500px;
        height: 500px;
        background-color: bisque;
        position: absolute;
        left: 350px;
        top: 0;
        overflow: hidden;
        display: none;
      }
      .bImg {
        position: absolute;
        top: 0;
        left: 0;
      }
</style>

三、加入JavaScript实现页面的交互效果

1、鼠标进入小图区域时显示遮罩层和大图区域；鼠标离开小图区域时隐藏遮罩层和大图区域。

javascript">//获取camera和zoom节点
let camera = document.querySelector('.camera');
let zoom = document.querySelector('.zoom');
//鼠标进入小图区域时显示遮罩层和大图区域
camera.onmouseenter=function(){
        zoom.style.display='block';
        bDiv.style.display='block';
      }
//鼠标离开小图区域时隐藏遮罩层和大图区域
camera.onmouseleave=function(){
        zoom.style.display='none';
        bDiv.style.display='none';
      }

2、鼠标在小图区域移动时更新遮罩层和大图的位置

javascript"> let bDiv = document.querySelector('.bDiv');
 let bImg = document.querySelector('.bImg');
//鼠标在 camera 元素内部移动的事件绑定
camera.onmousemove=function(event){

        //鼠标相对于浏览器窗口可视区域左上角的垂直和水平坐标
        let mouseY = event.clientY;
        let mouseX = event.clientX;

        //鼠标相对于 camera 元素的位置
        let zoomTop = camera.offsetTop;
        let zoomLeft = camera.offsetLeft;

        //zoom 元素（放大镜遮罩层）的宽度和高度
        let zoomW = zoom.offsetWidth;
        let zoomH = zoom.offsetHeight;

        //计算放大镜遮罩层的位置
        let zoomY = mouseY - zoomTop -zoomH / 2;
        let zoomX = mouseX - zoomLeft - zoomW / 2;
        // console.log(zoomX,zoomY);

        //限制放大镜遮罩层的移动范围
        if(zoomX >= 200){
          zoomX = 200;
        }
        if(zoomX <= 0){
          zoomX = 0;
        }
        if(zoomY >= 200){
          zoomY = 200;
        }
        if(zoomY <= 0){
          zoomY = 0;
        }

        //更新放大镜遮罩层的位置
        zoom.style.top = zoomY +'px';
        zoom.style.left = zoomX + 'px';

        //计算大图的移动距离
        let bImgWidth = bImg.offsetWidth - bDiv.offsetWidth;
        let bImgHeight = bImg.offsetHeight - bDiv.offsetHeight;
        let bImgTop = (zoomY / 200) * bImgHeight;
        let bImgLeft = (zoomX / 200) * bImgWidth;

        //更新大图的位置
        bImg.style.top = -bImgTop +'px';
        bImg.style.left = -bImgLeft + 'px';