js を使ってシンプルな虫眼鏡効果を実現

js を使ってシンプルな虫眼鏡効果を実現

この記事の例では、参考までに簡単な虫眼鏡効果を実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript で虫眼鏡の特殊効果を実現
  • JavaScript が Jingdong の虫眼鏡の特殊効果を模倣
  • JavaScript をベースにした虫眼鏡効果の実現
  • JSは電子商取引の商品表示の拡大鏡効果を実現します
  • ネイティブ JS で実装された虫眼鏡の特殊効果の例 [テストあり]
  • 虫眼鏡効果を実現するjs
  • ネイティブ js による虫眼鏡効果のシンプルな実装
  • Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス

<<:  MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法

>>:  CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード

推薦する

異なるインデックスを更新してMySQLのデッドロックルーチンを解決する

前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...

CentOS7でMySQL 5.7をアンインストールする方法

MySQLに何がインストールされているか確認する rpm -qa | grep -i mysql n...

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

ウェブデザインにおける円形要素の使用例 25 選

本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

Linux\Nginx 環境での仮想ドメイン名の設定とテスト検証

Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...

...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

WindowsでのNginxの起動や停止などの基本操作コマンドの詳しい説明

Windows で Nginx を使用するには、Nginx サービスの起動、停止、Nginx のリロ...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

高並列処理 nginx サーバー向け Linux カーネル最適化構成の説明

デフォルトの Linux カーネル パラメータは最も一般的なシナリオに基づいており、高い同時アクセス...

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

jQueryはテーブル行データのスクロール効果を実現します

この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...