jsはショッピングウェブサイトの商品の拡大鏡効果を実現します

<div id="ボックス">
    <div class="show">
        <img src="./images/1.jpg" alt="#">
        <div class="ドラッグ"></div>
    </div>
    <div class="拡大"></div>
    <ul>
        <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
        <li><img src="./images/2.small.jpg" alt="#"></li>
    </ul>
</div>

<script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

<スクリプト>
    oBox = document.querySelector('#box');
    
    定数imgArr = [
        {小さい: '1.small.jpg'、通常: '1.jpg'、大きい: '1.big.jpg'},
        {小さい: '2.small.jpg'、通常: '2.jpg'、大きい: '2.big.jpg'}
    ];
</スクリプト>

本文、div、ul、li{
    マージン: 0; パディング: 0;
    リストスタイル: なし;
    フォントサイズ: 0;
}
画像{
    表示: ブロック;
}
＃箱{
    幅: 650ピクセル;
    位置: 相対的;
    マージン: 0 自動 0 240px;
}
#ボックス .show{
    幅: 600ピクセル;
    境界線: 実線 2px ホットピンク;
    位置: 相対的;
}
#ボックス .show img{
    幅: 100%;
}
#ボックス .show .drag{
    位置: 絶対;
    幅: 200ピクセル;
    高さ: 200px;
    背景色: #e0a8d7;
    不透明度: .4;
    左: 0;
    上: 0;
    表示: なし;
}
#ボックス .magnify{
    幅: 800ピクセル;
    高さ: 800ピクセル;
    境界線: 実線 2px #7d777b;
    位置: 絶対;
    左: 100%;
    上: 0;
    背景: url("../images/1.big.jpg") 繰り返しなし 0 0 / 2400px;
    表示: なし;
}
#ボックス ul{
    幅: 100%;
    高さ: 150px;
    上マージン: 20px;
}
#ボックス ul::after{
    コンテンツ： '';
    表示: ブロック;
    クリア: 両方;
}
#ボックス ul li{
    高さ: 100%;
    フロート: 左;
    マージン: 0 8px;
    境界線: 実線 2px #fff;
}
#ボックスulli.active{
    境界線の色: ホットピンク;
}
#ボックス ul li img{
    高さ: 100%;
}

クラス MgnGlass {
    コンストラクタ(要素、配列) {
        this.ele = ele;
        this.array = 配列;

        this.show = ele.querySelector('.show');
        this.showImg = this.show.querySelector('img');
        this.drag = ele.querySelector('.drag');
        this.magnify = ele.querySelector('.magnify');
        this.oUl = ele.querySelector('ul');
        this.oUlis = ele.querySelectorAll('ul li');
    }

 // 後で定義されるすべてのメソッドを呼び出すメソッドを定義します // エントリ関数 init() {
        this.setMouse();
        this.setPosition();
        タブを設定します。
    }

    //マウスの動きを内側と外側にsetMouse() {
     //マウスオーバーして画像領域を表示し、カバーレイヤーと虫眼鏡を表示します this.show.addEventListener('mouseover', () => {
            this.drag.style.display = 'ブロック';
            this.magnify.style.display = 'ブロック';
        });
        //マウスアウトして画像領域を表示し、カバーレイヤーと虫眼鏡を非表示にします this.show.addEventListener('mouseout', () => {
            this.drag.style.display = 'なし';
            this.magnify.style.display = 'なし';
        });
    }

 // マウスが画像領域内を移動したときの配置効果を設定します // 1. カバーレイヤーをマウスの動きに追従させます---前のマウスドラッグ効果と同様です setPosition() {
        this.show.addEventListener('mousemove', (e) => {
            e = e || イベント;
            // 1. カバー レイヤーを配置します // マウスの位置によってカバー レイヤーの左上隅の座標位置を計算します let x = e.clientX - this.ele.offsetLeft - this.ele.clientLeft - this.drag.clientWidth / 2;
            y = e.clientY - this.ele.offsetTop - this.ele.clientTop - this.drag.clientHeight / 2 とします。

   // 2、境界値を設定します // 最小値は 0、最大値は親 div の幅と高さ - カバー レイヤーの幅と高さ if (x < 0) {
                0 の場合
            }
            そうでない場合、(x > (this.show.clientWidth - this.drag.clientWidth)){
                x = this.show.clientWidth - this.drag.clientWidth;
            }
            （y < 0）の場合{
                y = 0;
            }
            そうでない場合、(y > (this.show.clientHeight - this.drag.clientHeight)){
                y = this.show.clientHeight - this.drag.clientHeight;
            }

   // 3、カバー レイヤーに値を配置します this.drag.style.left = x + 'px';
            this.drag.style.top = y + 'px';

   // 4. 右側の虫眼鏡の背景画像も一緒に移動する必要があります // 背景画像に位置合わせを追加します // 左側の画像は固定で、カバーレイヤーが移動します カバーレイヤーが移動します 100 100
            // 右側は虫眼鏡ですが、これは動いていません。背景画像は動いています。背景画像は動いています -100 -100
            // 移動する場合、比率に応じて配置を設定する必要があります // 背景画像の配置 = 背景画像のサイズ * カバーレイヤーの配置 / 画像のサイズ // カバーレイヤーの移動の比率によって背景画像の配置値を計算します let backX = 2400 * x / 600;
            Y = 2400 * y / 600 を返します。

   // 背景画像を配置します // 背景画像を配置します this.magnify.style.backgroundPosition = `-${backX}px -${backY}px`;
        })
    }

 // 切り替え効果 // 1. マウスが現在置かれているラベルにスタイルを追加します // すべてのラベルからスタイルを削除し、現在クリックされている/渡されているラベルにスタイルを追加します setTab() {
        this.oUlis.forEach((アイテム、キー) => {
            item.addEventListener('マウスオーバー', () => {
             // 1、すべてのliタグのスタイルをクリアします this.oUlis.forEach((item2) => {
                    アイテム2.クラス名 = '';
                });
                // 2、現在のタグにスタイルを追加します。item.className = 'active';

    // 3、画像を設定します // 現在のラベルのインデックス添え字キーは、対応する画像配列に表示される画像のインデックス添え字です // 1、画像ラベルのパスを設定します // 配列、インデックス、および画像属性を通じて対応する画像名を取得します // label.src = 代入または label.setAttribute('src', 属性値) this.showImg.setAttribute('src', `./images/${this.array[key].normal}`);
                // 2. 虫眼鏡領域の背景画像のパスを設定します。 // 背景画像に関するすべての設定を書き換える必要があります this.magnify.style.background = `url('./images/${this.array[key].big}') no-repeat 0 0 / 2400px`;
            })
        })
    }
}

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅,初期スケール=1.0">
    <title>虫眼鏡</title>
    <link rel="スタイルシート" type="text/css" href="./css/mgfyGlass.css" >
</head>
<本文>
    <div id="ボックス">
        <div class="show">
            <img src="./images/1.jpg" alt="#">
            <div class="ドラッグ"></div>
        </div>
        <div class="拡大"></div>
        <ul>
            <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
            <li><img src="./images/2.small.jpg" alt="#"></li>
        </ul>
    </div>

    <script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

    <スクリプト>
        oBox = document.querySelector('#box');
        
        定数imgArr = [
            {小さい: '1.small.jpg'、通常: '1.jpg'、大きい: '1.big.jpg'},
            {小さい: '2.small.jpg'、通常: '2.jpg'、大きい: '2.big.jpg'}
        ];
        
        const mgnGlass = new MgnGlass(oBox, imgArr);
    
        mgnGlass.init();
    
    
    </スクリプト>
</本文>
</html>