原生js实现仿电商网站商品浏览——放大镜功能

一、需求分析

为实现以上效果，可知需求大体如下

1. 鼠标移入遮罩层放大图需要显示，鼠标移出的时候遮罩层和放大图隐藏
2. 鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
3. 放大图也要按照左边（遮罩层）移动比例来移动
4. 鼠标移到小图上可以切换图片

二、总体思路设计

左侧使用块级元素

嵌套,右侧使用一张背景图和

(enlarge作为可视区域).
由于需要鼠标进行操作后才会可视,故此将mask(遮罩层)和enlarge（放大图的可视区），的display属性初始值设置为none;

元素排列

 <div class="box">
        <div class="show">
            <img src="./imgs/1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="list">
            <p class="active">
                <img src="./imgs/1.small.jpg" showImg="./imgs/1.jpg" enlargeImg="./imgs/1.big.jpg" alt="">
            </p>
            <p>
                <img src="./imgs/2.small.jpg" showImg="./imgs/2.jpg" enlargeImg="./imgs/2.big.jpg"