<div class="box">
        <img src="images/s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="images/big.jpg" alt="">
        </div>
</div>

<style>
        * {
            padding: 0;
            margin: 0;
        }
 
        .box {
            position: relative;
            top: 70px;
            left: 30px;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .box > img {
            height: 100%;
        }
 
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            background-color: rgba(254, 222, 79, .5);
            border: 1px solid #ccc;
            cursor: move;
            /*讓鼠標(biāo)的狀態(tài)改成十字型*/
        }
 
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
            z-index: 999;
        }
 
        .big img {
            /* 一定要給.big下的img定位屬性它的位置才能隨著遮罩層的移動而移動哦 */
            position: absolute;
            top: 0;
            left: 0;
        }
</style>

<script>
        window.addEventListener('load', function () {
            // 1.獲取元素
            var box = document.querySelector('.box');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            // 2.注冊事件
            // (1)box鼠標(biāo)經(jīng)過即顯示出遮罩層mask和右側(cè)大圖 onmouseover  
            box.addEventListener('mouseover', function () {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            // (2)box鼠標(biāo)離開即隱藏遮罩層mask和右側(cè)大圖 onmouseout  
            box.addEventListener('mouseout', function () {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
            // (3)讓mask遮罩層隨著鼠標(biāo)移動（此事件要寫在獲得鼠標(biāo)的情況下）
            box.addEventListener('mousemove', function (e) {
                // (1). 先計算出鼠標(biāo)在盒子內(nèi)的坐標(biāo)，鼠標(biāo)在盒子里的坐標(biāo)=鼠標(biāo)在屏幕中的坐標(biāo)-盒子的offsetLeft/offsetTop
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // (2) 鼠標(biāo)在遮罩層中應(yīng)該處于中心的位置，所以還要把鼠標(biāo)從遮罩層的左上角往右往下移動遮罩層寬高的一半才行，即鼠標(biāo)在盒子里的坐標(biāo)減去盒子高度的一半和寬度的一半就是我們mask 的最終 left 和top值了
                var maskX = x - mask.offsetWidth / 2;   // 鼠標(biāo)位置在遮罩層水平中間
                var maskY = y - mask.offsetHeight / 2;   // 鼠標(biāo)位置在遮罩層垂直中間
 
                // (3) 我們mask 遮罩層水平移動的距離即maskX= 遮罩層的父盒子的寬-遮罩層的寬，而遮罩層垂直移動的距離即maskY= 遮罩層的父盒子的高-遮罩層的高
                // (4) 如果x 坐標(biāo)小于了0 就讓他停在0 的位置
                // 遮擋層的最大移動距離= 遮罩層的父盒子的寬-遮罩層的寬（因為此案例的遮罩層是一個正方形，所以水平和垂直的范圍是一致的）
                var maskMax = box.offsetWidth - mask.offsetWidth;   // 遮罩層的最大移動距離
                // 判斷限定遮罩層的可移動范圍：水平可移動范圍：
                maskX <= 0 ? maskX = 0 : maskX = maskX;     // 水平最小可移動范圍
                maskX >= maskMax ? maskX = maskMax : maskX = maskX; // 水平最小大可移動范圍
                // 判斷限定遮罩層的可移動范圍：垂直可移動范圍：
                maskY <= 0 ? maskY = 0 : maskY = maskY;     // 垂直最小可移動范圍
                maskY >= maskMax ? maskY = maskMax : maskY = maskY; // 垂直最大可移動范圍
                // 將鼠標(biāo)的坐標(biāo)值給mask的left和top（mask是有定位的）注意要加px單位?。?！
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
                // (5)讓右側(cè)大圖隨著遮罩層移動而移動
                // 大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
                // 獲取大圖
                var bigImg = big.querySelector('img');
                // 大圖片最大移動距離
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                // 大圖片的移動距離 X Y
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // 注意：1.bigImg獲取到的元素需要有CSS定位屬性才能移動位置的，沒有定位位置是不會變的哦
                // 2.大圖的移動和遮罩層移動的方向是相反的哦，因為遮罩層往左移動時實際上大圖是要往右移動的，所以值是負(fù)數(shù)
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
        })
</script>