序文約束手形ブログは虫眼鏡の事例を中心に、関連する知識ポイントを紹介します。安心してお読みいただけます。最後にソースコードがあります。 事例: 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します
1. インデックスの重要性インデックスは、列に特定の値を持つ行をすばやく見つけるために使用されます。...
質問CSS 固定配置の position:fixed は非常に使いやすいです。ブラウザのビューポート...
1. まず、CSS3 のターゲット セレクターを使用し、a タグを使用して id セレクターを指定し...
表のキャプションは表の上または下に配置でき、プロパティで調整できます。デフォルトのテーブル タイトル...
最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
目次01 シナリオ分析02 操作方法03 結果分析01 シナリオ分析今日の午後、開発仲間がオンライン...
データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...
ルートディレクトリとインデックスファイルroot ディレクティブは、ファイルの検索に使用するルート ...
<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...
テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...
一般的に言えば、より完全な結果を得るためには、2 つ以上のテーブルから結果を取得する必要があります。...
この記事の例では、Androidの9グリッド画像を表示するための具体的なコードを参考までに共有してい...
注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...
vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...