この記事の例では、参考までに簡単な虫眼鏡効果を実現するための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 パスワードと単一ユーザー ログインを設定するサンプル コード
前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...
MySQLに何がインストールされているか確認する rpm -qa | grep -i mysql n...
実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...
1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...
本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...
プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...
margin:auto; + position: absolute; 上、下、左、右:0デモを見れ...
Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...
MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...
Windows で Nginx を使用するには、Nginx サービスの起動、停止、Nginx のリロ...
目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...
デフォルトの Linux カーネル パラメータは最も一般的なシナリオに基づいており、高い同時アクセス...
質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...
この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...