jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

<div class="preview_img">
 <img src="upload/s3.png" alt="">
 <div class="mask"></div>
 <div class="big">
  <img src="upload/big.jpg" alt="" class="bigImg">
 </div>
</div>

.preview_img {
 位置: 相対的;
 高さ: 398ピクセル;
 境界線: 1px 実線 #ccc;
}
。マスク {
 表示: なし;
 位置: 絶対;
 幅: 300ピクセル;
 高さ: 300px;
 上: 0;
 左: 0;
 背景: #FEFE4F;
 不透明度: .5;
 境界線: 1px 実線 #ccc;
 カーソル: 移動;
}
。大きい {
 表示: なし;
 位置: 絶対;
 幅: 550ピクセル;
 高さ: 550px;
 上: 0;
 左: 410px;
 zインデックス: 999;
 境界線: 1px 実線 #ccc;
 オーバーフロー: 非表示;
}
.bigimg{
 位置: 絶対;
 左: 0;
 上: 0;
}

window.addEventListener('load',function(){
    var preview_img = document.querySelector('.preview_img');
    var マスク = this.document.querySelector('.mask');
    var big = this.document.querySelector('.big');
    var bigImg = this.document.querySelector('.bigImg');
    //マウスオーバー preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'ブロック';
        big.style.display = 'ブロック';
    })
    //マウスアウト preview_img.addEventListener('mouseout',function(){
        マスクスタイル表示 = 'なし';
        big.style.display = 'なし';
    })
    //マウスが動くと preview_img.addEventListener('mousemove',function(e){
        //ボックス内のマウスの座標 var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // オクルージョン レイヤーが移動する距離 var maskX = x - mask.offsetWidth/2;
        var maskY = y -mask.offsetHeight/2;
        // 大きな画像の移動距離 // オクルージョン レイヤーの最大移動距離 var maskMaxX = preview_img.offsetWidth - mask.offsetWidth;
        var maskMaxY = preview_img.offsetHeight - mask.offsetHeight;
        //X座標が0未満の場合は0のままにします if (maskX <= 0) {
            マスクX = 0;
        }それ以外の場合 (maskX >= maskMaxX) {
            マスクX = マスクMaxX;
        }
        //Y座標が0未満の場合は0のままにします if (maskY <= 0) {
            マスクY = 0;
        }それ以外の場合 (maskY >= maskMaxY) {
            マスクY = マスクMaxY;
        }
        //オクルージョン レイヤーの移動 mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        
        // 大きな画像の最大移動距離 var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
        var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
        //大きな画像の移動距離XY
        // 大きな画像の移動距離 = オクルージョン レイヤーの移動距離 * 大きな画像の最大移動距離 / オクルージョン レイヤーの最大移動距離 var bigX = maskX * bigMaxX / maskMaxX;
        var bigY = maskY * bigMaxY / maskMaxY;
        // 大きな画像と小さな画像 (マウスの動き) は反対方向です。bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})