シンプルな虫眼鏡効果を実現するJavaScript

大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスクレイヤーが表示されます。マウスを動かすと、マスクレイヤーも一緒に移動します。箱の横には拡大写真もあります。拡大写真の位置は、マスクレイヤーの位置によって変わります。マウスを大きな箱から離すと、マスクレイヤーと拡大写真が消えます。

実装のアイデア

1. HTMLとCSSでボックス、マスクレイヤー、拡大画像ページを編集し、マスクレイヤーと拡大画像をデフォルトで非表示に設定します。
2. 要素オブジェクトを取得し、マウスイベント mouseover を大きなボックスにバインドし、マウスが通過したときにマスクレイヤーと拡大画像を表示するように設定します。表示を「ブロック」に設定します。
マウスアウト - - -mouseout、マウスが通過したときにマスクレイヤーと拡大画像の表示を設定します。表示は「なし」に設定されています
3. 大きなボックス内のマウスの位置を計算する
4. マウスをマスクレイヤーの中央に置きます。マウスの位置を基準にマスクレイヤーを上方向と左方向に半分の距離だけ移動します。マスクレイヤーの位置 - ボックスを基準に上方向と左方向のオフセットを割り当てて絶対位置を指定します。
5. 大きなボックスでマスクレイヤーの動きを制限する - - - オフセットの値を決定します。<= 0の場合、オフセットは0です。
6. マスクレイヤーが移動すると、拡大画像の位置が変わります。マスクレイヤー移動値 / マスクレイヤー最大移動距離 = 拡大画像移動距離 / 拡大画像最大移動距離。この関係に従って、拡大画像の移動距離が求められます。移動距離は、拡大画像のオフセット上と左に割り当てられます。

注意:拡大画像のオフセットには、マスクレイヤーの移動方向と反対の負の値が与えられます。

コードサンプル

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>携帯電話の詳細ページ</title>
    <!-- <link rel="スタイルシート" href="css/detail.css" >
    <script src="js/detail.js"></script> -->
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        .詳細コンテンツ{
            幅: 1200ピクセル;
            マージン: 0 自動;
        }
        
        画像 {
            境界線: 0;
            垂直位置合わせ: 中央;
        }
        
        .preview_img {
            位置: 相対的;
            幅: 400ピクセル;
            高さ: 400px;
            上マージン: 30px;
            境界線: 1px 実線 #ccc;
        }
        
        .preview_img 画像 {
            幅: 100%;
            高さ: 100%;
        }
        
        。マスク {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 300ピクセル;
            高さ: 300px;
            背景色: ピンク;
            不透明度: .5;
            カーソル: 移動;
        }
        
        。大きい {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 410px;
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 1px 実線 #ccc;
            背景色: ピンク;
            zインデックス: 999;
            オーバーフロー: 非表示;
        }
        
        .bigimg{
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 800ピクセル;
            高さ: 800ピクセル;
        }
    </スタイル>
</head>

<本文>
    <div class="detail-content">
        <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>
    </div>

    <スクリプト>
        var previewImg = document.querySelector('.preview_img');
        var マスク = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg = document.querySelector('.bigImg');

        // マウスオーバーボックスイベント previewImg.addEventListener('mouseover', function() {
            // オクルージョン レイヤーと拡大画像の表示を設定します。mask.style.display = 'block';
            big.style.display = 'ブロック';
        })

        // マウスがボックスを離れるイベント previewImg.addEventListener('mouseout', function() {
            // オクルージョンレイヤーと拡大画像を非表示に設定します。mask.style.display = 'none';
            big.style.display = 'なし';
        })

        // マウスがボックス内を移動する previewImg.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;

            // ボックスは正方形なので、水平方向の X 軸の最大移動値のみが計算されます。Y 軸の最大移動値は X 軸と一致します。var maskMax = previewImg.offsetWidth - mask.offsetWidth;

            // オクルージョンレイヤーがボックス内で移動できるように制限する if (maskX <= 0) {
                マスクX = 0;
            } そうでなければ (maskX >= maskMax) {
                マスクX = マスクMax;
            }

            マスクY <= 0の場合{
                マスクY = 0;
            } そうでなければ (maskY >= maskMax) {
                マスクY = マスクMax;
            }

            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

            // 拡大画像の最大移動値を計算します。大きな画像の水平移動値 = オクルージョン レイヤーの移動値 * 大きな画像の最大移動距離 / オクルージョン レイヤーの最大移動距離 var bigMax = bigImg.offsetWidth - big.offsetWidth;

            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;

            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';

        })
    </スクリプト>
</本文>

</html>

ページ効果: