放大鏡的效果跟平常我們?cè)陔娚叹W(wǎng)站中的商品詳情頁將商品放大查看的效果是一樣的，效果圖如下：

放大鏡

布局結(jié)構(gòu)如下：

<div class="enlarge">
    <div class="middleBox">
        <img src="./img/1.jfif" alt="">
        <div class="mask"></div>
        <div class="bigBox">
            <img src="./img/1.jfif" alt="">
        </div>
    </div>
    <div class="smallBox">
        <img src="./img/1.jfif" alt="">
        <img src="./img/2.webp" alt="">
        <img src="./img/3.webp" alt="">
    </div>
</div>

css樣式如下：

.middleBox{
    width: 400px;
    height: 400px;
    position:relative;
}
.middleBox>img{
    width: 400px;
    height: 400px;
}
.middleBox .mask{
    width: 100px;
    height: 100px;
    background-color: rgba(255,255,0,.7);
    position:absolute;
    left: 0;
    top: 0;
    display:none;
}
/* 
    布局的時(shí)候，有一個(gè)比例必須遵循：
    中等盒子跟遮罩的大小比例 = 大圖跟大盒子的大小比例
*/
.middleBox>.bigBox{
    width: 300px;
    height: 300px;
    position:absolute;
    left: 105%;
    top: 0;
    display:none;
    overflow: hidden;
}
.middleBox>.bigBox>img{
    width: 1200px;
    height: 1200px;
    position:absolute;
    left: 0;
    top: 0;
}
.smallBox img{
    width: 80px;
    height: 80px;
    border:2px solid #000;
    margin:20px 20px 0 0;
}
.smallBox img:first-child{
    border-color:red;
}
.mask:hover{
    cursor: move;
}

效果分為3個(gè)部分，第1部分是點(diǎn)擊小圖，換中等圖和大圖：

// 獲取所有標(biāo)簽
var enlarge = document.querySelector('.enlarge');
var middleBox = enlarge.querySelector('.middleBox')
var bigBox = enlarge.querySelector('.bigBox')
var middleImg = enlarge.querySelector('.middleBox>img')
var bigImg = enlarge.querySelector('.bigBox>img')
var smallImgs = enlarge.querySelectorAll('.smallBox>img')
var mask = enlarge.querySelector('.mask')
// 點(diǎn)擊小圖換中圖和大圖
// 遍歷所有小圖
for(var  i=0;i<smallImgs.length;i++){
    // 給所有小圖綁定單擊事件
    smallImgs[i].onclick = function(){
        // 將所有小圖的邊框顏色改成黑色
        for(var  j=0;j<smallImgs.length;j++){
            smallImgs[j].style.borderColor = '#000';
        }
        // 將當(dāng)前點(diǎn)擊的這個(gè)小圖邊框顏色改成紅色
        this.style.borderColor = 'red';
        // 獲取到當(dāng)前點(diǎn)擊的小圖的路徑
        var src = this.getAttribute('src')
        // 將小圖的路徑放到中圖和大圖中
        middleImg.setAttribute('src',src)
        bigImg.setAttribute('src',src)
    }
}

第2部分是鼠標(biāo)移入中等盒子讓遮罩和大盒子顯示，移出隱藏：

// 鼠標(biāo)移入中盒子
middleBox.onmouseover = function(){
    // 讓遮罩和大盒子顯示
    mask.style.display = 'block';
    bigBox.style.display = 'block';
}
// 鼠標(biāo)移出中盒子
middleBox.onmouseout = function(){
    // 讓遮罩和大盒子隱藏
    mask.style.display = 'none';
    bigBox.style.display = 'none';
}

第3部分，鼠標(biāo)在移入中等盒子后，讓遮罩跟隨鼠標(biāo)移動(dòng)，讓大圖跟隨遮罩移動(dòng)：

// 鼠標(biāo)移入中盒子
middleBox.onmouseover = function(){
    // 讓遮罩和大盒子顯示
    mask.style.display = 'block';
    bigBox.style.display = 'block';
    // 鼠標(biāo)在中盒子中移動(dòng)
    middleBox.onmousemove = function(){
        // 獲取鼠標(biāo)當(dāng)前在瀏覽器中的位置
        var e = window.event;
        var x = e.pageX;
        var y = e.pageY;
        // 根據(jù)光標(biāo)位置計(jì)算遮罩的left和top = 光標(biāo)位置 - 遮罩大小的一般 - 大盒子左邊的間距
        var l = x - mask.offsetWidth/2 - enlarge.offsetLeft;
        var t = y - mask.offsetHeight/2 - enlarge.offsetTop;
        // 限制left和top
        if(l<0) l=0
        if(t<0) t=0
        if(l>middleBox.clientWidth-mask.offsetWidth) l=middleBox.clientWidth-mask.offsetWidth
        if(t>middleBox.clientHeight-mask.offsetHeight){
            t=middleBox.clientHeight-mask.offsetHeight
        }
        // 設(shè)置left和top
        mask.style.left = l + 'px'
        mask.style.top = t + 'px'
        // 移動(dòng)過程中計(jì)算大圖需要移動(dòng)的距離 = 遮罩在中盒子中移動(dòng)的比例 * 大圖的尺寸
        // 計(jì)算遮罩在中盒子中移動(dòng)的比例
        var percentX = l / middleBox.clientWidth;
        var percentY = t / middleBox.clientHeight;
        // 根據(jù)比例計(jì)算大圖需要移動(dòng)的距離
        var bigLeft = percentX * bigImg.offsetWidth
        var bigTop = percentY * bigImg.offsetHeight
        // 將計(jì)算好的大圖需要移動(dòng)的距離的設(shè)置給大圖
        bigImg.style.left = -bigLeft + 'px'
        bigImg.style.top = -bigTop + 'px'
    }
}