通過JavaScript如何做一個仿京東的跟隨圖片放大鏡效果？(附加註釋)簡單實用。

yi把菜刀發表於2021-01-01
JavaScript

效果示例：

思想過程：
在一個大盒子裡放一個圖片，一個半透明的黃色遮罩層(帶有絕對定位才可以移動)，一個放大過後的圖片，採取絕對定位固定到圖片的一側

html+css的片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1 {
            position: relative;
            width: 300px;
            height: 300px;
            cursor: move;
        }
        .a1>img{
            width: 100%;
            height: 100%;
        }
        .a1box {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color:  #FEDE4F;  //設定顏色
            opacity: 0.5; // 設定為半透明
        }
        .big {
            display: none;
            position: absolute;
            left: 310px;
            top: 0;
            width: 600px;
            height: 600px;
            overflow: hidden;
        }
        .big>img {
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
        }
    </style>
    <script src="try.js"></script>  //引入js程式碼片段
</head>
<body>
    <div class="a1">
        <img src="../../../html+css/images/yzfc.jpg" alt="">
        <div class="a1box"></div>
        <div class="big">
            <img src="../../../html+css/images/yzfc.jpg" alt="" class="bigimg">
        </div>
    </div>
</body>
</html>

javascript的片段：：

window.addEventListener('load',function() {
    //獲取各個元素
    var a1 = document.querySelector('.a1');
    var a1box = document.querySelector('.a1box');
    var big = document.querySelector('.big')
    var bigimg = document.querySelector('.bigimg')
    // 1.滑鼠經過兩個圖片顯示出來哦
    a1.addEventListener('mouseover',function() {
        a1box.style.display = 'block';
        big.style.display = 'block';
    })
    // 2.滑鼠離開，兩個圖片的display改為none，隱藏
    a1.addEventListener('mouseout',function() {
        a1box.style.display = 'none';
        big.style.display = 'none';
    })
    // 3.當滑鼠在其中移動時的相關聯的程式碼及解釋
    a1.addEventListener('mousemove',function(e){
        var x = e.pageX -a1.offsetLeft; //獲取 滑鼠在盒子內的x座標
        var y = e.pageY - a1.offsetTop; // 獲取 滑鼠在盒子內的x座標
        x = x - a1box.offsetWidth/2; // 使得滑鼠在盒子的中間
        y = y - a1box.offsetWidth/2; // 使得滑鼠在盒子的中間
        xmax = a1.offsetWidth - a1box.offsetWidth;  //算出盒子在x方向的最大移動距離
        ymax = a1.offsetHeight - a1box.offsetHeight; // 算出設定盒子在y方向最大的移動距離
        // 判斷滑鼠是否離開盒子，防止盒子跟著滑鼠離開父容器
        if(x<=0) {
            x=0;
        }
        if(y<=0) {
            y=0;
        }
        if(x>=xmax) {
            x = xmax +'px';
        }
        if(y>=xmax) {
            y = ymax+ 'px';
        }
        a1box.style.left = x+'px'; //設定盒子的 x座標
        a1box.style.top = y+'px'; // 設定盒子的 y座標
        //大圖片移動距離= 遮擋層移動距離*大圖片最大移動距離/遮擋層的最大移動距離
        var bigimgx = bigimg.offsetWidth - big.offsetWidth; //獲取大圖片x方向上的最大移動距離
         var bigimgy = bigimg.offsetHeight - big.offsetHeight; //獲取大圖片y方向上的最大移動距離
        bigimg.style.left = -x * bigimgx / xmax +'px'  //根據公式求出 大圖片x方向應該移動的距離
        bigimg.style.top = -y * bigimgx / ymax +'px'  // 根據公式求出 大圖片y方向應該移動的距離
    })
})

在這裡插入圖片描述
本圖為程式碼示例的圖，可搬走。

相關文章