Javascript サンプルプロジェクトでの虫眼鏡効果の実装プロセス

序文

約束手形ブログは虫眼鏡の事例を中心に、関連する知識ポイントを紹介します。安心してお読みいただけます。最後にソースコードがあります。

事例: JD.com の虫眼鏡効果の模倣

効果は以下の図に示されています。

機能リクエスト:

マウスを小さい画像の上に移動すると、マスクレイヤーが表示され、その隣に大きい画像も表示されます。マウスを外側に移動すると、マスクレイヤーが消え、大きい画像も消えます。
マスクレイヤーは小さなボックス内でのみ移動でき、外部には移動できません。
マスクは小さなボックス内で移動し、大きな画像には対応するプレートが表示されます。

ケーススタディ:

要素の非表示と表示
マスクレイヤーの移動範囲はオフセットを使用して計算されます
大きな箱の中で移動した距離を計算する

コード例:

まず、おおよそ次のような構造を構築する必要があります。

すべてのボックスのスタイルを書き込んだ後、青いマスクレイヤーボックスと、右側にある大きな赤い画像を含むボックスを非表示にします。紫色のボックスは相対的に配置されており、すべてのボックスは紫色のボックスに基づいて配置されていることに注意してください。

コードは次のとおりです。

<div class="box">
        <img src="./image/pic1.jpg" alt="" class="box_pic">
        <div class="mask"></div>
        <div class="big">
            <img src="./image/bigimg.jpg" alt="" class="bigImg">
        </div>
</div>

構築後、このボックスにマウス移動イベントを追加します。マウスがボックスに移動すると、マスクボックスと大きなボックスが表示されます。マウスがボックスから移動すると、マスクボックスと大きなボックスが消えます。

コードは次のとおりです。

  var pic = document.querySelector('.box');
        var マスク = document.querySelector('.mask');
        var big = document.querySelector('.big');
        //現れたり消えたりする pic.addEventListener('mouseenter', function () {
            mask.style.display = 'ブロック';
            big.style.display = 'ブロック';
        })
        pic.addEventListener('mouseleave', 関数() {
            マスクスタイル表示 = 'なし';
            big.style.display = 'なし';
        })

次に、マスクレイヤーが移動できる距離を計算する必要があります。

上図からわかるように、マスクレイヤーが小ボックスの範囲を超えないようにする必要があるため、小ボックス内でマスクレイヤーが移動できる距離は、小ボックスの幅からマスクレイヤーボックスの幅を引いた距離のみです。このとき、オフセットの属性を使用します。

オフセットシリーズ

関連するプロパティのオフセットシリーズを使用して、要素の位置（オフセット）、サイズなどを動的に取得します。

オフセットシリーズのプロパティ:

注意: オフセットシリーズには offsetTop と offsetLeft のみが含まれます。！！返される値は単位なしです。

比較: オフセットとスタイル属性

オフセット

styleoffset は任意のスタイルシートのスタイル値を取得できますが、style はインラインスタイルシートのスタイル値のみを取得できます。

オフセットシリーズで得られる値は単位なしです。

style.widthは単位の付いた文字列を取得します。offsetWidthには、padding+border+widthが含まれます。style.widthは、paddingとborderを除いた値を取得します。offsetWidthとその他のプロパティは読み取り専用プロパティであり、取得のみ可能で割り当てることはできません。style.widthは読み取り/書き込みプロパティであり、取得と割り当てが可能です。要約:要素のサイズと位置を取得するのに適しています。要約:要素の値を変更するのに適しています。

次に、まず e.pageX と e.pageY を使用してマウスの現在の座標を取得し、次に e.pageX-box.offsetLeft を使用してボックス内のマウスの位置を取得します。では、早速図を見てみましょう。

黒い線と赤い線の間の距離が、ボックス内のマウスの現在の位置です。また、マスクレイヤーはボックスなので、マウスはボックスの左上隅の近くに配置されます。マウスをボックスの中心点に合わせるには、ボックスを 50% 上に、50% 右に移動する必要があります。最後に、マウスの位置を取得し、マウスが現在ボックス内にあるかどうか、つまり移動位置が 0 より大きく、最大移動距離より小さいかどうかを判断します。

コードは次のとおりです。

 pic.addEventListener('mousemove', 関数(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 maskMax = pic.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';
}

これで、マスクレイヤーはボックス内で移動でき、ボックスの範囲を超えないことがわかります。これで、このプロジェクトは最後のステップに到達しました。最後のステップでは、隣の大きなボックス内の画像に、対応するブロックが表示されます。

2 つの画像の比率は同じなので、次の式に従って計算できます。

つまり、大きな画像の移動距離 = 遮蔽層の移動距離 * 大きな画像の最大移動距離 / 遮蔽層の最大移動距離

式に代入すると、大きな画像の移動距離が得られます。マウスを左から右にスライドすると、大きな画像が右から左に移動するため、負の値になることに注意してください。

コードは次のとおりです。

 // 大きな画像の最大移動距離 = 遮蔽レイヤーの移動距離 * 大きな画像の最大移動距離 / 遮蔽レイヤーの最大移動距離 var bigImg = document.querySelector('.bigImg');
            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';

この時点で、虫眼鏡プロジェクトは完了です。ステップごとに分析するのは非常に簡単です。オフセットシリーズの属性が主に使用されます。では、他の 2 つの属性を紹介せずに、オフセットシリーズの属性を紹介するにはどうすればよいでしょうか。クライアントシリーズとスクロールシリーズをご紹介します。

完全なコードは次のとおりです。

<!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>
    <スタイル>
        。箱 {
            位置: 相対的;
            マージン: 30px;
            幅: 300ピクセル;
            高さ: 300px;
            /* ポインタイベント: なし; */
            /* カーソル: エイリアス; */
            /* カーソル: デフォルト; */
        }
 
        .box_pic {
            幅: 300ピクセル;
            高さ: 300px;
            境界線: 1px 実線 #ccc;
 
        }
 
        。マスク {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 200ピクセル;
            高さ: 200px;
            背景色: rgb(54, 240, 240);
            不透明度: 0.5;
            カーソル: 全スクロール;
            zインデックス: 9;
        }
 
        。大きい {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 320px;
            幅: 500ピクセル;
            高さ: 500px;
            オーバーフロー: 非表示;
            境界線: 1px 実線 #ccc;
        }
 
        .bigimg{
            位置: 絶対;
            幅: 800ピクセル;
            高さ: 800ピクセル;
        }
    </スタイル>
</head>
 
<本文>
    <div class="box">
        <img src="./image/pic1.jpg" alt="" class="box_pic">
        <div class="mask"></div>
        <div class="big">
            <img src="./image/bigimg.jpg" alt="" class="bigImg">
        </div>
    </div>
    </div>
    <スクリプト>
        var pic = document.querySelector('.box');
        var マスク = document.querySelector('.mask');
        var big = document.querySelector('.big');
        //現れたり消えたりする pic.addEventListener('mouseenter', function () {
            mask.style.display = 'ブロック';
            big.style.display = 'ブロック';
        })
        pic.addEventListener('mouseleave', 関数() {
            マスクスタイル表示 = 'なし';
            big.style.display = 'なし';
        })
        // 移動 // マウスの位置を取得 pic.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 maskMax = pic.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 bigImg = document.querySelector('.bigImg');
            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>

クライアントシリーズ

関連するプロパティのクライアントシリーズを使用して、要素の表示領域に関する情報を取得します。

クライアントシリーズの属性:

注意: クライアントにはパディング値が含まれており、戻り値には単位がありません。

スクロールシリーズ

関連するプロパティのスクロールシリーズを使用して、要素のサイズ、スクロール距離などを動的に取得します。

スクロールシリーズのプロパティ:

3つのシリーズの概要

3 つのシリーズは次のとおりです。

主な使用方法は次のとおりです。

offsetシリーズは、要素の位置を取得するためによく使用されます。 offsetLeft offsetTopclientは、要素のサイズを取得するためによく使用されます。 clientWidth clientHeightscrollは、スクロール距離を取得するためによく使用されます。 scrollTop scrollLeft ページスクロール距離は、window.pageXOffsetを通じて取得されることに注意してください。

このブログを読んで、すぐに虫眼鏡ケースを手に入れましたか？このケースは難しくありません。主に、BOM オブジェクト内のオフセット、クライアント、スクロールを確認します。これらの知識ポイントを使用して、モーダルボックスの生産を完了し、スターケースを排除することもできます〜

上記は、Javascript サンプルプロジェクトの虫眼鏡特殊効果の実装プロセスの詳細な内容です。Javascript 虫眼鏡特殊効果の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: