这段时间通过学习HTML与JavaScript，我自主学习掌握了JS放大镜效果的知识。JS放大镜效果是一种常见的网页交互效果，它允许用户在鼠标悬停或点击某个元素上时，在指定区域显示该元素的放大图像，下面是我的学习记录。

一、创建HTML结构

在HTML文件中创建一个包含原始图像的<div>元素，并在其上方创建另一个<div>作为放大区域。

<div class="one">
        <div class="meng"></div>
        <div class="flag"></div>
    </div>
    <div class="two">
        <img src="./images/05.jpg" alt="" id="bigImg">
    </div>

这里代码的作用是在页面上选择一个元素作为触发放大镜的目标，我们选择图片如下所示。

二、样式设计

使用CSS来设置图像容器和放大区域的样式。

* {
            margin: 0;
            padding: 0;
        }
        /* 小图 */
        .one {
            width: 370px;
            height: 490px;
            background: url(./images/5.png) no-repeat 0 0;
            border: 1px solid #CCC;
            position: relative;
            left: 20px;
            top: 20px;
            float: left;
        }
        /* 大图 */
        .two {
            width: 370px;
            height: 490px;
            position: relative;
            float: left;
            margin-left: 40px;
            margin-top: 20px;
            overflow: hidden;
            display: none;
        }

        /* 小滑块 */
        .flag {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(240, 224, 81, 0.6);
            display: none;
            border: 1px solid rgba(100, 100, 100, 0.5);
        }
        .meng {
            width: 370px;
            height: 490px;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0);
            /* display: none; */
            z-index: 99;
            cursor:move;
        }

        #bigImg {
            position: absolute;
            left: 0;
            top: 0;
        }

这里代码的作用如下：

• 创建一个用于显示放大图像的区域（放大镜窗口）。

• 设置放大镜窗口的位置为鼠标当前位置，使其跟随鼠标移动。

• 设置放大镜窗口的背景图像为目标元素的图像。

• 设置放大镜窗口的尺寸和样式，以适应放大效果需求。

三、JS交互设计

使用JavaScript来实现放大镜效果。

// 获取操作对象

        //1.获取小图
        let smallImg = document.querySelector('.one');
        let { log } = console;

        //2.获取大图
        let bigImg = document.querySelector('#bigImg');

        //3.获取小滑块
        let flagDiv = document.querySelector('.flag');

        // 获取蒙版
        let meng = document.querySelector('.meng');

        // 添加监听事件

        //2.鼠标移出事件
        smallImg.addEventListener('mouseout', function () {
            // 隐藏大图
            bigImg.parentElement.style.display = 'none';

            // 隐藏小滑块
            flagDiv.style.display = 'none';
        })

        //3.鼠标移动事件
        meng.addEventListener('mousemove', function (e) {

            //处理事件对象的兼容性
            let ev = e || window.event;

            // 获取鼠标的坐标
            let mouseX = ev.offsetX;
            let mouseY = ev.offsetY;
          
            // // 显示小滑块
            flagDiv.style.display = 'block';
            
            flagDiv.style.left = (mouseX - flagDiv.offsetWidth / 2) + 'px';
            flagDiv.style.top = (mouseY - flagDiv.offsetHeight / 2) + 'px';

这里的代码作用如下：

• 更新放大镜窗口的位置为鼠标当前位置，以保持跟随鼠标移动。

• 根据鼠标位置计算目标元素中对应位置的坐标，用于确定放大图像的显示部分。

• 鼠标移出事件包含隐藏大图和隐藏小滑块。

• 鼠标移动事件包含处理事件对象的兼容性、获取鼠标的坐标和显示小滑块。

四、效果展示

五、总结

要实现JS放大镜效果，需要一个图像容器、放大区域以及相关的HTML、CSS和JavaScript代码。通过监听鼠标事件、计算位置和样式更新，可以让放大区域根据鼠标位置实时显示原始图像的放大图像。