JS圖片放大鏡功能實現

2022 年 11 月 19 日
筆記
javascript, 放大鏡

JS圖片放大鏡功能實現

技術關鍵點
1.左側和上側距離，在一個水平位置和垂直位置中有我們可以挪動的區域，就是原圖片區域，滑鼠挪動位置是一個塊狀位置，他的左側和上側距離瀏覽器上側和左側分別有一個長度，我們叫它們 ClientX 和 ClientY，而左上側滑鼠沒有略過的位置實際上是一個點，我們拖動放大塊時，它會由一個點變成一個方塊，這個放大鏡左上邊的點所控制的這一點距離螢幕上側和左側的 ClientY 和 ClientX 會隨著滑鼠的移動而變大變小，那麼要計算放大塊左側距離原點和上側原點就要減去原圖距離螢幕的上邊高度和左邊高度。在一個水平位置和垂直位置中有我們可以挪動的區域，就是原圖片區域，滑鼠挪動位置是一個塊狀位置，他的左側和上側距離瀏覽器上側和左側分別有一個長度，我們叫它們 ClientX 和 ClientY，而左上側滑鼠沒有略過的位置實際上是一個點，我們拖動放大塊時，它會由一個點變成一個方塊，這個放大鏡左上邊的點所控制的這一點距離螢幕上側和左側的 ClientY 和 ClientX 會隨著滑鼠的移動而變大變小，那麼要計算放大塊左側距離原點和上側原點就要減去原圖距離螢幕的上邊高度和左邊高度。
x = 事件對象.clientX – 外側盒子.offsetLeft;
Y = 事件對象.clientY – 外側盒子.offsetTop;

HTML程式碼：

 <div id="main">
     
        <img src="images/bg.webp" width="100%">
 
        <div id="mirror">
            <img src="images/bg.webp">
        </div>
    </div>

JS程式碼：

<script>
        //獲取元素
        let oMain = document.querySelector('#main')

        let oMirror = document.querySelector('#mirror')

        let oBigimg = document.querySelector('#mirror img')
        //設置滑鼠移動監聽事件
        oMain.addEventListener('mousemove', e => {
            //獲取滑鼠在主圖盒子內的XY坐標,減去偏移值
            let x_left = e.clientX - oMain.offsetLeft;
            let y_top = e.clientY - oMain.offsetTop;
            //將獲取到的滑鼠XY坐標,賦值給 oMirror遮罩層盒子的定位坐標
            //注意一定後面+'px',不然沒效果
            oMirror.style.left = x_left - oMirror.offsetWidth / 2 + 'px';
            oMirror.style.top = y_top - oMirror.offsetHeight / 2 + 'px';
            //大圖的X軸移動距離
            let bigImgleft = oBigimg.offsetWidth / oMain.offsetWidth * x_left - oMirror.offsetWidth / 2;
            //大圖的Y軸移動距離
            let bigImgTop = oBigimg.offsetHeight / oMain.offsetHeight * y_top - oMirror.offsetHeight / 2;
            //坐標賦值,讓大圖跟著遮罩層一起移動
            oBigimg.style.left = -bigImgleft + 'px';
            oBigimg.style.top = -bigImgTop + 'px';


        })
</script>

CSS程式碼：

* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            width: 100wh;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(200, 190, 221, .5);

        }

        img {
            display: block;
        }

        #main {
            width: 800px;
            box-shadow: 0 0 20px rgba(0, 0, 0, .4);
            position: relative;
            overflow: hidden;

        }

        #mirror {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid #fff;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        #mirror img {
            position: absolute;
        }

效果圖：