JavaScriptはeコマースプラットフォームの製品詳細を実装します

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

<スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
 
        。箱 {
            位置: 相対的;
            上: 70px;
            左: 30px;
            幅: 400ピクセル;
            高さ: 400px;
            境界線: 1px 実線 #ccc;
        }
        .box > 画像 {
            高さ: 100%;
        }
 
        。マスク {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 300ピクセル;
            高さ: 300px;
            ボックスのサイズ: 境界線ボックス;
            背景色: rgba(254, 222, 79, .5);
            境界線: 1px 実線 #ccc;
            カーソル: 移動;
            /*マウスの状態をクロスに変更します*/
        }
 
        。大きい {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 410px;
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 1px 実線 #ccc;
            オーバーフロー: 非表示;
            zインデックス: 999;
        }
 
        .bigimg{
            /* .big の下の img に位置属性を指定して、マスク レイヤーの動きに合わせて位置を移動できるようにします */
            位置: 絶対;
            上: 0;
            左: 0;
        }
</スタイル>

<スクリプト>
        window.addEventListener('load', 関数() {
            // 1. 要素を取得する var box = document.querySelector('.box');
            var マスク = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            // 2. イベントを登録する // (1) マウスがボックス上を通過すると、マスクレイヤーと右側の大きな画像が表示される onmouseover  
            box.addEventListener('mouseover', 関数() {
                mask.style.display = 'ブロック';
                big.style.display = 'ブロック';
            })
            // (2) マウスがボックスから離れると、マスクレイヤーと右側の大きな画像が非表示になります。  
            box.addEventListener('mouseout', 関数() {
                マスクスタイル表示 = 'なし';
                big.style.display = 'なし';
            })
            // (3) マスクレイヤーをマウスで移動させる（このイベントはマウスが取得されたときに書き込まれる）
            box.addEventListener('mousemove', 関数(e) {
                // (1). まずボックス内のマウスの座標を計算します。ボックス内のマウスの座標 = 画面上のマウスの座標 - ボックスの offsetLeft/offsetTop
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                //（2）マウスはマスクレイヤーの中央にある必要があるため、マウスをマスク層の左上隅から右下に移動する必要があります。つまり、マウスの座標の半分のマイナスの座標は、高さの半分とマスクの最終的な左側のマスク=マスクの最終的な左側の幅ですマスクレイバーマスキー= y -mask.offeitheight // //マスク層の垂直中央にある水平方向の中央。マスクレイヤーの - マスクレイヤーの高さ//（4）x座標が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; // 最大垂直可動範囲 // マスクの左と上（マスクを配置する位置）のマウス座標値を付与します。px単位の加算が必要なので注意！ ！ ！
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
                // (5) 右側の大きな画像をマスクレイヤーと一緒に移動させます // 大きな画像の移動距離 = マスクレイヤーの移動距離 * 大きな画像の最大移動距離 / マスクレイヤーの最大移動距離 // 大きな画像を取得します var bigImg = big.querySelector('img');
                // 大きな画像の最大移動距離 var bigMax = bigImg.offsetWidth - big.offsetWidth;
                // 大きな画像の移動距離 XY
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // 注意: 1. bigImg によって取得された要素には、位置を移動するための CSS 配置属性が必要です。配置がないと、位置は変更されません。// 2. 大きな画像とマスク レイヤーの動きは反対方向です。マスク レイヤーが左に移動すると、大きな画像は実際には右に移動するため、値は負の数になります。bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
        })
</スクリプト>