この記事の例では、参考までに簡単な虫眼鏡効果を実現するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。 まずは効果を見てみましょう: 虫眼鏡について書く前に、まずその位置づけを理解しましょう。 通常、子は親に対して絶対的に相対的です(親要素は相対的に配置され、子要素は絶対的に配置されます)。 要素の配置方法: 1. 静的配置、配置方法を追加せずにすべての要素をデフォルト状態にする 2. 相対的な配置は、文書の流れを離れることなく、元の位置、変位に対して相対的に行うことができます。 3.固定位置、完全にドキュメントフローから外れ、ブラウザの空白領域を基準に移動、ブラウザのスクロールによるスクロールは発生しません。 4.絶対配置はドキュメントフローから完全に分離され、上位の N レベル要素を基準として配置されます。親要素に相対、絶対、または固定配置方法がない場合、絶対配置された要素は上位レベルを検索します。 まずボックスと拡大ボックスを見つけ、次に拡大ボックスを非表示にします 。箱 { 幅: 450ピクセル; 高さ: 450px; マージン: 100px 0 0 100px; 境界線: 1px 実線の赤; 位置: 相対的; } /* 右側の大きなボックス */ .bigBox{ 幅: 540ピクセル; 高さ: 540px; 位置: 絶対; 上: 100px; 左: 560ピクセル; 境界線: 1px 実線 #ccc; オーバーフロー: 非表示; 表示: なし; } .bigBox画像{ 位置: 絶対; 左: 0; 上: 0; } /* かぶせる */ .ボックス .マスク{ 幅: 260ピクセル; 高さ: 260px; 背景色: 黄色; /*透明度を調整*/ 不透明度: .4; 位置: 絶対; 左: 0; 上: 0; /*デフォルトで消える*/ 表示: なし; } js を書くときは、次の点に注意する必要があります。 ページが読み込まれたら、マウスのEnterイベントとMove Outイベントをボックスにバインドします。 <スクリプト> window.onload = 関数 (){ var box = document.querySelector(".box"); var マスク = document.querySelector(".mask"); var bigBox = document.querySelector(".bigBox"); var bigImg = document.querySelector(".bigBox > img"); コンソールにログ出力します。 //マウスがボックス内に移動します。onmouseover = function (){ document.querySelector(".mask").style.display = "ブロック"; document.querySelector(".bigBox").style.display = "ブロック"; } // ボックスから外へ移動します。onmouseout = function (){ document.querySelector(".mask").style.display = "なし"; document.querySelector(".bigBox").style.display = "なし"; } // オーバーレイをマウスの動きに追従させる box.onmousemove = function (){ // ボックスには 100 ピクセルの余白があるため、それを減算する必要があります。そうしないと、位置がずれてしまいます。var left = event.pageX - 100 - 130; var top = event.pageY - 100 - 130; // カバーするオブジェクトはボックスの範囲を超えることはできないため、座標値の範囲を決定する必要があります。 // カバーするオブジェクトがボックス内で移動できる最大距離を取得します。 var maskMax = this.offsetWidth - mask.offsetWidth; //裁判官は左 if(左 <= 0){ 左 = 0; }そうでない場合(左 >= マスク最大){ 左 = マスク最大; } // トップ 上端 <= 0 の場合 上 = 0; }そうでない場合(top >= maskMax){ 上 = マスクMax; } // スタイルに左と上の値を設定します。mask.style.left = left + "px"; mask.style.top = top + "px"; mask.style.cursor = "移動"; 知らせ: ① 移動の割合に応じて、大画像の移動座標を設定します ② 大画像の移動座標 = カバーのオフセット * 大画像の最大移動距離 / カバーの最大移動距離 ③ ? = オフセット * (画像の幅 - bigBox の幅) / maskMax // 大きなボックス内の大きな画像の最大移動距離 var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth; // 大きな画像の左の値 var bigImgX = mask.offsetLeft * bigImgMax / maskMax; // 大きな画像の上の値 var bigImgY = mask.offsetTop * bigImgMax / maskMax; // オーバーレイの移動方向は大きな画像の移動方向と逆なので、ここでは負の値を指定する必要があります。bigImg.style.left = -bigImgX + "px"; bigImg.style.top = -bigImgY + "px"; } } マークは虫眼鏡(黄色の部分) <div class="box"> <img src="../img/small.jpg" alt=""> <div class="mask"> </div> <div class="bigBox"> <img src="../img/big.jpg" alt=""> </div> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法
>>: CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...
1. ワニスの概要1. ワニスの紹介Varnish は、新しいソフトウェア アーキテクチャを使用し、...
<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...
第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...
仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...
IE で ClearType をオンにした後に発生する透明フォントの問題を解決するには、透明要素に背...
テーブルを素早くコピーする方法まず、テーブル db1.t を作成し、1000 行のデータを挿入します...
目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...
element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...
目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...
目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...
<br />ページに <img src=""> が含まれ...
HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...
赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...