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 パスワードと単一ユーザー ログインを設定するサンプル コード

推薦する

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...

Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する

1. ワニスの概要1. ワニスの紹介Varnish は、新しいソフトウェア アーキテクチャを使用し、...

IE8 ベータ 1 には注意が必要な 2 つの領域があります

<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...

Linux での rpm、yum、ソースコードの 3 つのインストール方法の詳細な紹介

第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...

CSS で美しい時計アニメーション効果を実装するためのサンプルコード

仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...

IE で ClearType をオンにした後の透明フォントの問題の解決方法

IE で ClearType をオンにした後に発生する透明フォントの問題を解決するには、透明要素に背...

MySQL コピーテーブルと許可分析の 3 つの実装方法

テーブルを素早くコピーする方法まず、テーブル db1.t を作成し、1000 行のデータを挿入します...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

elementui の el-popover スタイルの変更が有効にならない問題の解決策

element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...

Vueデータ監視の原理の詳細な説明

目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...

Vue フロントエンド開発補助機能状態管理詳細例

目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...

コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...