＜js＞放大镜列表

 

放大镜列表核心思想：选项卡功能+放大镜功能

（1）HTML部分

    <div class="cont">
        <div class="small_box">
            <img src="./imgs/m0.jpg" alt="">
            <!-- 遮罩 -->
            <span></span>
            <!-- 盖住 在获取鼠标定位时 不会跑到span上出错 -->
            <em></em>
        </div>
        <!-- ===list 三个小图=== -->
        <ul>
            <li><img src="./imgs/m0.jpg" alt=""></li>
            <li><img src="./imgs/s1.jpg" alt=""></li>
            <li><img src="./imgs/s2.jpg" alt=""></li>
        </ul>
    </div>
    <div class="big_box">
        <img src="./imgs/l0.jpg" alt="">
    </div>

 （2）CSS部分

       /* 小图容器 */ 
        .small_box {
            width: 350px;
            height: 350px;
            /* float: left; */
            position: relative;
            cursor: pointer;
        }
        /* 小图 */      
        .small_box img {
            width: 350px;
            height: 350px;
        }
        /* 遮罩 宽高js自动计算 相对父元素定位*/
        .small_box span {
            background: rgba(200, 200, 200, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            /* 初始隐藏 */
            display: none;
        }
        /* 盖住小盒子 拉倒四边 层级最高*/      
        .small_box em {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }
        /* ====列表==== */        
        .cont ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
        }
        .cont li {
            width: 50px;
            height: 50px;
            border: solid 4px #fff;
        }
        .cont li.active {
            border-color: #000;
        }
        .cont li img {
            width: 50px;
            height: 50px;
        }
        /* 大图片容器=小图片容器 */   
        .big_box {
            width: 350px;
            height: 350px;
            /* float: left; */
            position: absolute;
            overflow: hidden;
            /* 初始隐藏 */
            display: none;
            left: 400px;
            top: 10px;
        }
        /* 大图 */ 
        .big_box img {
            width: 800px;
            height: 800px;
            /* 相对于父元素定位 */
            position: absolute;
        }

（3）JS部分 【选项卡功能】+【放大镜功能】 

  // ======选项卡功能======
    // 图片数据,以json数组形式
    const imgs = [{
        s: "./imgs/m0.jpg",
        m: "./imgs/m0.jpg",
        l: "./imgs/l0.jpg",
    }, {
        s: "./imgs/s1.jpg",
        m: "./imgs/m1.jpg",
        l: "./imgs/l1.jpg",
    }, {
        s: "./imgs/s2.jpg",
        m: "./imgs/m2.jpg",
        l: "./imgs/l2.jpg",
    }];
    // 点击对应按钮 换图片地址 (选项卡)
    function Tab() {
        this.li = document.querySelectorAll(".cont li");
        this.sImg = document.querySelector(".small_box img");
        this.bImg = document.querySelector(".big_box img");
        this.data = imgs;
        this.index = 0;
        this.addEvent();
    }
    Tab.prototype.addEvent = function() {
        const that = this;
        // 遍历 给每个li绑定点击事件
        for (let i = 0; i < this.li.length; i++) {
            this.li[i].xuhao = i;
            this.li[i].onclick = function() {
                that.hide();
                that.getIndex(this);
            }
        }
    }
    Tab.prototype.hide = function() {
        // 取消按钮样式
        this.li[this.index].className = "";
    }

    Tab.prototype.getIndex = function(now) {
        // 获得点击事件的索引
        // now接收被点击的li的序号 赋值给Index
        this.index = now.xuhao;
        // 索引之后执行？显示
        this.show();
    }
    Tab.prototype.show = function() {
        // 根据点击按钮的索引 显示内容
        this.li[this.index].className = "active";
        // 显示中图 大图
        this.sImg.src = this.data[this.index].m;
        this.bImg.src = this.data[this.index].l;
    }
    new Tab();