使用原生JavaScript實現(xiàn)放大鏡效果

更新時間：2023年03月01日 09:12:31 作者：KK_

這篇文章主要為大家詳細介紹了如何使用原生JavaScript實現(xiàn)放大鏡效果（可自由大小適配），文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下

需求列表

鼠標進入盒子里面控制遮罩層和放大盒子顯示與隱藏

遮罩層跟隨鼠標移動且遮罩層不超出盒子限定范圍內(nèi)

圖片盒子/遮罩層/放大盒子這三個的寬高大小均可適配

HTML

<div class="outer"
    <!-- 圖片盒子 box1 -->
    <div class="box">
        <img src="./33.jpg" alt="">
        <!-- 遮罩層 -->
        <div class="mask"></div>
    </div>
    <!-- 放大盒子 -->
    <div class="box2"></div>
</div>

CSS

.outer {
    display: flex;
}
.box {
    /* 可以改變這里的寬高 */
    width: 400px;
    height: 400px;
    background: green;
    position: relative;
    margin-left: 100px;
}
.box img {
    width: 100%;
    height: 100%;
}
.box2 {
    /* 可以改變這里的寬高 */
    width: 600px;
    height: 600px;
    background-image: url(./33.jpg);
    background-repeat: no-repeat;
    background-size: 400% 400%;
    display: none;
    margin-left: 20px;
}
.mask {
    /* 可以改變這里的寬高 */
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, .5);
    display: none;
    position: absolute;
}

Javascript

        // 拿到三個盒子的元素
        const mask = document.querySelector('.mask')
        const box1 = document.querySelector('.box')
        const box2 = document.querySelector('.box2')

        // 作用：遮罩層和放大盒子的顯示與隱藏
        box1.addEventListener('mouseenter', () => {
            mask.style.display = 'block'
            box2.style.display = 'block'
        })
        box1.addEventListener('mouseleave', () => {
            mask.style.display = 'none'
            box2.style.display = 'none'
        })

        // 鼠標移入盒子
        box1.addEventListener('mousemove', (e) => {
            // e.pageX 獲取鼠標在當前可視窗口 x軸 位置
            // box1.getBoundingClientRect().left 獲取當前盒子距離左側(cè)位置（范圍：可視窗口）
            // document.documentElement.scrollTop 距離頂部位置

            // 之所以減去一個距離頂部位置，是因為getBoundingClientRect這個方法是相對于可視窗口的，
            // 如果我們當前的元素到了出現(xiàn)在滾動條的情況下，要減去它的一個滾動條高度，這樣才不會錯位。
            let x = e.pageX - box1.getBoundingClientRect().left - document.documentElement.scrollLeft
            let y = e.pageY - box1.getBoundingClientRect().top - document.documentElement.scrollTop  // 減去該盒子位置距離頂部的距離

            // 規(guī)定遮罩層在當前這個父盒子里面移動
            if (x >= 0 && x <= box1.offsetWidth && y >= 0 && y <= box1.offsetHeight) {

                // 初始化 x 和 y 可移動的位置
                let mx = 0
                let my = 0

                // -------------------處理遮罩層移動-------------------
                let maskWidth = mask.offsetWidth
                let maskWidthHalf = mask.offsetWidth / 2
                let currentBoxWidth = box1.offsetWidth

                let maskHeight = mask.offsetHeight
                let maskHeightHalf = mask.offsetHeight / 2
                let currentBoxHeight = box1.offsetHeight

                // 處理 x 部分
                // 在 [遮罩自身一半] 以內(nèi)，無法移動
                if (x < maskWidthHalf) mx = 0
                // 如果在 [盒子 - 遮罩的一半] 這個區(qū)間，才可以移動
                if (x >= maskWidthHalf && x <= currentBoxWidth - maskWidthHalf) mx = x - maskWidthHalf
                // 到達 [盒子 - 遮罩一半] 就不能再移動了
                if (x > currentBoxWidth - maskWidthHalf) mx = currentBoxWidth - maskWidth

                // 處理 y 部分（同理）
                if (y < maskHeightHalf) my = 0
                if (y >= maskHeightHalf && y <= currentBoxHeight - maskHeightHalf) my = y - maskHeightHalf
                if (y > currentBoxHeight - maskHeightHalf) my = currentBoxHeight - maskHeight

                // 讓遮罩層移動
                mask.style.left = mx + 'px'
                mask.style.top = my + 'px'

                // -------------------處理背景圖片移動-------------------
                // 1. 背景被放大的倍數(shù) == 盒子1的寬度 / 遮蓋層寬度
                let scaleWidth = (box1.offsetWidth / mask.offsetWidth) * 100
                let scaleHeight = (box1.offsetHeight / mask.offsetHeight) * 100
                box2.style.backgroundSize =
                    `${scaleWidth + '%'} ${scaleHeight + '%'}`
                    
                console.log(scaleWidth, '放大倍數(shù)');

                // 2. 行走的步數(shù) = 放大盒子寬度 / 遮蓋層寬度
                let stepWidth = (box2.offsetWidth / mask.offsetWidth)
                let stepHeight = (box2.offsetHeight / mask.offsetHeight)
                
                // 這里加負號是因為，它需要從反方向進行移動的，正數(shù)則是往右移動
                box2.style.backgroundPositionX = -stepWidth * mx + 'px'
                box2.style.backgroundPositionY = -stepHeight * my + 'px'
                
                console.log(mx, 'box1可移動總距離 = box1寬 - 遮罩層寬');
                console.log(stepWidth, '行走倍數(shù)(步數(shù)) = box2寬 / mask寬 ');
                console.log(-stepWidth * mx, '可移動總距離 * 行走步數(shù)；表示遮罩層從一邊走到另一邊結(jié)束所用距離');
            }
        })