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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript で虫眼鏡の特殊効果を実現
  • JavaScript が Jingdong の虫眼鏡の特殊効果を模倣
  • 虫眼鏡ケースのJavaScriptオブジェクト指向実装
  • JavaScript が Jingdong の虫眼鏡効果を模倣
  • JavaScript が Taobao の虫眼鏡効果を模倣
  • 虫眼鏡効果を実現するJavaScript
  • js で虫眼鏡効果を実現するためのアイデアとコード
  • 虫眼鏡の詳細のJavaScript実装

<<:  MySQLオンラインDDLの使用に関する詳細な説明

>>:  HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

推薦する

Linux の GRUB ブート プログラムの暗号化の概要

目次1. GRUB暗号化とは何か2. grub暗号化手順3. grub暗号化のロック属性1. GRU...

MySQL エラー: ロックを取得しようとしたときにデッドロックが見つかりました。トランザクションの解決策を再起動してください

問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...

Zabbix で Windows のパフォーマンスを監視する方法

背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...

Docker-compose を使用して ELK をデプロイするためのサンプル コード

環境ホストIP 192.168.0.9 Docker バージョン 19.03.2 docker-co...

MySQL の永続性とロールバックの原理を 1 つの記事で理解する

目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...

CSS で QR コードスキャンボックスを実装するためのサンプルコード

カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキ...

Nginx Webサーバーのサンプルコードの設定方法の詳細な説明

概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...

echartsマップカルーセルハイライトを解決するための記事

目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...

ろうそくを溶かす(水滴)サンプルコードを実現する純粋な CSS

成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

モバイル端末の適応により、px は自動的に rem に変換されます。

まずpostcss-pxtoremをインストールします: npm install postcss-p...

divとtableの選択と組み合わせ方について簡単に説明します

ページレイアウトは、Web ページを扱い始めた頃からずっと気にかけていたことです。初期のテーブル構造...

Webpack でよく使われる 12 個の Loader を共有する (要約)

目次序文スタイルローダーCSSローダーsassローダーpostcssローダーバベルローダーtsローダ...

高可用性 Web クラスターを実装するための Keepalived+Nginx+Tomcat サンプル コード

高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...