如何三分钟使用js快速实现商品放大镜

前言：

我们经常在商品展示中会看到放大镜功能，这可以帮助用户更好的查看图片的细节，以下是用基础三件套实现的一个简单放大镜，下面是效果图。

html框架

<div class="left">
        <div class="pictrue">
            <div class="middle">
                <img src="./images/1.jpg" alt="">
                <div class="layer"></div>
            </div>
            <div class="small">
                <ul>
                    <li class="active"><img src="./images/1.jpg" alt=""></li>
                    <li><img src="./images/2.jpg" alt=""></li>
                    <li><img src="./images/3.jpg" alt=""></li>
                    <li><img src="./images/4.jpg" alt=""></li>
                    <li><img src="./images/5.jpg" alt=""></li>
                </ul>
            </div>
            <div class="large"></div>
        </div>
    </div>

​ 首先创建一个类名为left的容器，用于包含整个放大镜和图片元素，在picture容器里面我们放了四个板块，small容器用来装小图片列表，鼠标在小图片上移动则middle中会显示不同的图片，鼠标在middle上移动则large图片显示，large大图片里面用来放大镜元素，用来放被放大的图片，layer元素被放在图像元素的上层实现遮罩效果

.small	.middle	.large	.layer
用来装小图片列表，鼠标在小图片上移动则middle中会显示不同的图片	鼠标在middle上移动则large图片显示	用来放被放大的图片	在middle上层实现鼠标移动的遮罩效果

css样式

<style>
        /* 清除默认样式 */
        * {
            box-sizing: border-box;
        }

        body {
            color: #333;
            font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
        }

        ul,
        h1,
        h3,
        h4,
        p,
        dl,
        dd {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        i {
            font-style: normal;
        }

        input {
            outline: none;
            padding: 0;
            border: none;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }

        ul {
            list-style: none;
        }

        /* 清除默认样式 */

        /* left模块的样式 */
        .left {
            width: 580px;
            padding: 30px 50px;
        }

        .left .pictrue {
            width: 480px;
            height: 400px;
            display: flex;
            position: relative;
        }

        .left .pictrue .middle {
            width: 400px;
            height: 400px;
            position: relative;
            cursor: move;
        }

        .left .pictrue .middle .layer {
            display: none;
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            pointer-events: none;
        }

        .left .pictrue .large {
            width: 400px;
            height: 400px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            position: absolute;
            left: 412px;
            top: 0;
            z-index: 999;
            background-color: #fff;
            display: none;
            background-image: url(../images/1.jpg);
            background-size: 800px 800px;
        }

        .left .pictrue .middle img {
            width: 100%;
            height: 100%;
        }

        .left .pictrue .small {
            width: 80px;
            height: 400px;

        }

        .left .pictrue .small ul li {
            width: 68px;
            height: 68px;
            margin-bottom: 15px;
            margin-left: 12px;
            border: 2px solid transparent;
            cursor: pointer;
        }

        .left .pictrue .small ul li img {
            width: 100%;
            height: 100%;
        }

        .left .pictrue .small ul li.active,
        .left .pictrue .small ul li:hover {
            border-color: #27BA9B;
        }

首先，清除所有会使用到的元素的默认样式，容器的样式设定使用flex布局，和定位使其元素都在该在在的位置，其中要注意large板块与layer的display都设置为none，让他们隐藏，通过js鼠标移动事件再使其显示。

JavaScript

<script>
        // 放大镜效果
        let small = document.querySelector(".small ul")
        let smallImgArr = document.querySelectorAll("li img")
        let middleImg = document.querySelector(".middle img")

        // 1.鼠标移动到小图片切换middle中图片
        console.log(smallImgArr);
        for (let i = 0; i < smallImgArr.length; i++) {
            smallImgArr[i].addEventListener('mouseover', function (e) {
                if (e.target.tagName === 'IMG') {
                    middleImg.src = smallImgArr[i].src
                }
            })
        }
        // 2.鼠标移动到middle大盒子里面，显示large遮罩层和layer大盒子
        let middle = document.querySelector(".middle")
        let layer = document.querySelector(".layer")
        let large = document.querySelector(".large")
        // 鼠标移入图片时显示放大镜  
        middle.addEventListener('mouseover', function (e) {
            layer.style.display = "block"
            large.style.display = "block"
            large.style.backgroundImage = `url(${middleImg.src})`
        })
        //鼠标移出图片时隐藏放大镜 
        middle.addEventListener('mouseleave', function (e) {
            layer.style.display = "none"
            large.style.display = "none"
        })
        // 鼠标移动时实现放大镜效果  
        middle.addEventListener('mousemove', function (e) {
            console.log(e.offsetX);
            // 获取鼠标在图片上的位置坐标,计算放大镜需要移动的位置  
            let left = e.offsetX - layer.offsetWidth / 2
            let top = e.offsetY - layer.offsetHeight / 2
            // 判断鼠标移动的距离不能超过图片的最左边和最右边
            if (left < 0) {
                left = 0
            } else if (left > middle.offsetWidth / 2) {
                left = middle.offsetWidth / 2
            }
            // 判断鼠标移动的距离不能超过图片的最上边和最下边
            if (top < 0) {
                top = 0
            } else if (top > middle.offsetHeight / 2) {
                top = middle.offsetHeight / 2
            }
            layer.style.left = left + "px"
            layer.style.top = top + "px"
            // 计算图片背景的偏移量,并应用于放大镜元素属性
            large.style.backgroundPositionX = -left * 2 + "px"
            large.style.backgroundPositionY = -top * 2 + "px"

        })
    </script>

首先，获取到需要操作的元素，包括放大镜板块元素和图片元素。然后，监听鼠标在图片上的移入移出用来控制放大镜的显隐并监听鼠标的移动事件用来获取要放大的区域。

接下来获取图片的宽度和高度和鼠标在图片上的位置坐标。同时，我们需要将鼠标当前位置坐标减去放大镜宽度和高度的一半，这样可以使放大镜中心点与鼠标位置对齐。然后，计算图片背景的偏移量，这样放大的部分能够与原图对应。而且放大镜的背景图片要放大两倍，使用两倍的图片大小以保证放大效果。最后，将这些值应用于放大镜元素属性，包括背景图片、背景大小、位置和偏移量。这样就实现了简单的放大镜效果。

结语：希望能给大家带来一点启发~