目錄

1.結構功能分析

1.1 結構分析圖

1.2 HTML和CSS代碼展示

2.JS分析+代碼

2.1 當滑鼠經過/離開，mask顯示/隱藏，大圖片盒子顯示/隱藏

2.2 遮罩層跟隨滑鼠移動

（1）先計算出滑鼠在盒子內的坐標

（2）把計算好的左邊賦值給遮罩層

（3）x坐標小于0 讓他停在0的位置；x大于最大移動寬度，停在最大移動寬度的位置

2.3 移動遮罩層，大圖片跟著移動

3.最終效果圖

1.結構功能分析

1.1 結構分析圖

• 整個案例可以分為三個功能模塊

• 滑鼠經過小圖片盒子， 遮擋層盒子 和 大圖片盒子顯示，離開隱藏2個盒子功能

• 黃色的遮擋層跟隨滑鼠移動功能，

• 移動黃色遮擋層，大圖片跟隨移動功能，

1.2 HTML和CSS代碼展示

    <div class="minBox">
        <img src="images/bbd.jpg" alt="武魂殿女王" id="minImg">
        <div class="mask"></div>
        <div class="maxBox">
            <img src="images/bbdbig.jpg" alt="" id="maxImg">
        </div>
    </div>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .minBox {
            position: relative;
            left: 200px;
            top: 50px;
            width: 300px;
            height: 257px;
        }

        .mask {
            /* 先隱藏遮罩層mask */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(248, 215, 125, 0.3);
            /* 滑鼠移動 移動圖示 */
            cursor: move;
            border: 1px solid rgb(248, 215, 125);
        }

        .maxBox {
            /* 先隱藏大圖片盒子maxBox */ 
            display: none;
            position: absolute;
            top: 0;
            left: 340px;
            width: 600px;
            height: 427px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .maxBox img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

2.JS分析+代碼

2.1 當滑鼠經過/離開，mask顯示/隱藏，大圖片盒子顯示/隱藏

    //先獲取我們需要用到得到元素
    var minBox = document.querySelector('.minBox');
    var mask = document.querySelector('.mask');
    var maxBox = document.querySelector('.maxBox');

    //滑鼠經過事件 mouseover   隱藏 none  顯示  block 
    minBox.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        maxBox.style.display = 'block';
    })
    //滑鼠離開事件 mouseout
    minBox.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        maxBox.style.display = 'none';
    })

2.2 遮罩層跟隨滑鼠移動

（1）先計算出滑鼠在盒子內的坐標

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

（2）把計算好的左邊賦值給遮罩層

    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;

（3）x坐標小于0 讓他停在0的位置；x大于最大移動寬度，停在最大移動寬度的位置

！！！！ 最大移動寬度和高度 = minBox的寬度/高度-mask的寬度/高度

    var maxMoveWidth = minBox.offsetWidth - mask.offsetWidth;
    var maxMoveHeigh = minBox.offsetHeight - mask.offsetHeight;
    //if判斷遮罩層移動不超過小圖片盒子邊框
    //mask 移動的距離  x軸  
    if (maskX <= 0) {
         maskX = 0;
    } else if (maskX >= maxMoveWidth) {
         maskX = maxMoveWidth;
    }
    //mask 移動的距離  x軸
    if (maskY <= 0) {
         maskY = 0;
    } else if (maskY >= maxMoveHeigh) {
         maskY = maxMoveHeigh;
    }
    mask.style.left = maskX + 'px';
    mask.style.top = maskY + 'px';

2.3 移動遮罩層，大圖片跟著移動

！！！！大圖片移動距離=（遮罩層移動距離 X 大圖片最大移動距離）/ 遮罩層最大移動距離

    var maxImg = document.querySelector('#maxImg');
    //大圖片最大移動距離
    var maxBigMoveX = maxImg.offsetWidth - maxBox.offsetWidth;
    var maxBigMoveY = maxImg.offsetHeight - maxBox.offsetHeight;
     
    var bigMoveX = maskX * maxBigMoveX / maxMoveWidth;
    var bigMoveY = maskY * maxBigMoveY / maxMoveHeigh;

    maxImg.style.left = -bigMoveX + 'px';
    maxImg.style.top = -bigMoveY + 'px';

3.最終效果圖