虫眼鏡効果を実現するJavaScript

虫眼鏡効果を実現するJavaScript

この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

今回得られた効果は以下の通りです。

このケースは少し難しく、CSSとJSの両方についてさらに考える必要があります。さっそく始めましょう〜

1. まず、HTML と CSS を使用して全体のレイアウト、つまり隣接する 2 つのボックス A と B、および左側のボックス A 内の小さなボックス S を計画する必要があります。隣接性を実現するために、私が採用した方法は、両方にposition:absoluteを設定し、次に隣接するようにlefttop値を設定するというものでした。
小さなボックス S にposition:absoluteを設定し、背景色を調整することもできます。

2. 次に、js を使用してアニメーション効果を設定する必要があります。つまり、マウスをボックス A に置くと、小さなボックス S の位置がマウスの動きに合わせて移動し、ボックス B の画像はボックス S で覆われた画像の拡大バージョンになります。どうやってそれを達成するのでしょうか?

3.まず、小さなボックス S の位置の変更を実現します。ボックス A のonmousemove関数を呼び出し、マウスがボックス A 上で移動する時間を示すパラメータ client を渡します。クライアント (clientX、clientY) を通じてマウスの位置を取得し、次に(clientX-boxA.offsetLeft,clientY-boxA.offsetTop)を通じて画像上のマウスの相対座標を取得します。この値からボックス S の幅と高さの半分を引くと、A 内のボックス S の位置を取得できます。
ただし、注意してください。ボックス S の境界を設定し、水平座標が 0 またはボックス A の幅、垂直座標が 0 またはボックス A の高さのときに、その座標を固定しておくことを忘れないでください。

4.次に、ボックス B の画像を、ボックス S で覆われた画像の拡大版にします。まず、この拡大効果をどのように実現できるかという疑問について考えてみましょう。 私の実装の観点から見ると、ボックス B の場合、まず背景画像 == ボックス A の画像が必要であり、次にそれを特定の倍数 x で拡大します。ボックス S が移動すると、拡大 + 移動の効果を実現するために、ボックス B のbackground-position y に変更します。

5.最後に、xとyの値は何ですか? (S、A、B がすべて等しい比率であると仮定) x :ボックス B を拡大する係数は、 A のサイズを S のサイズで割った値に等しくする必要があります。これにより、同じ画像範囲を実現できます。 y : B が移動したときの距離の変化は、ボックス S が移動する距離 * (ボックス B のサイズを S のサイズで割った値) になります。もっと考えてもいいよ〜

実装プロセスが複雑すぎるかもしれません。もっと良い方法を思いついたら、メッセージを残してください。

コードは次のとおりです。

<!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>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }

        #箱 {
            位置: 絶対;
            左: 180ピクセル;
            上: 100px;
        }

        #ボックス画像{
            幅: 400ピクセル;
            高さ: 300px;
            境界線: 1px実線 rgba(255, 255, 255, 0.7);
            垂直方向の位置合わせ: 下;
        }

        #ナビ{
            幅: 480ピクセル;
            高さ: 360ピクセル;
            境界線: 1px実線 rgba(255, 255, 255, 0.7);
            位置: 絶対;
            左: 582ピクセル;
            上: 100px;
            背景画像: url(../img/morn.jpg);
            背景繰り返し: 繰り返しなし;
            背景サイズ: 250% 250%
        }

        #小さい {
            幅: 160ピクセル;
            高さ: 120px;
            位置: 絶対;
        }
    </スタイル>
</head>

<本文>
    <div id="ボックス">
        <div id="small"></div>
        <img src="../img/morn.jpg" alt="">
    </div>
    <div id="nav"></div>
    <スクリプト>
        box = document.getElementById("box"); とします。
        small = document.getElementById("small"); とします。
        nav = document.getElementById("nav"); とします。

        box.onmousemove = 関数 (クライアント) {
            x = client.clientX - box.offsetLeft とします。
            y = client.clientY - box.offsetTop とします。
            small.style.left = x - 80 + 'px';
            small.style.top = y - 60 + 'px';
            dis_x = box.offsetLeft + box.offsetWidth - client.clientX とします。
            dis_y = box.offsetTop + box.offsetHeight - client.clientY とします。

            nav.style.backgroundPositionX = (80 - x) * 3 + 'px';
            nav.style.backgroundPositionY = (60 - y) * 3 + 'px';

            (x - 80 < 0) の場合 {
                小さいスタイルを左に 0 に設定します。
                nav.style.backgroundPositionX = 0;
            }
            (dis_x <= 80)の場合{
                small.style.left = box.offsetWidth - 160 + 'px';
                nav.style.backgroundPositionX = (160 - box.offsetWidth) * 3 + 'px';
            }
            (y - 60 < 0)の場合{
                小さいスタイルトップ = 0;
                nav.style.backgroundPositionY = 0;
            }
            (dis_y < 60)の場合{
                small.style.top = box.offsetHeight - 120 + 'px';
                nav.style.backgroundPositionY = (120 - box.offsetHeight) * 3 + 'px';
            }

            small.style.backgroundColor = "rgba(135, 207, 235, 0.61)";

        }

        box.onmouseout = 関数(){
            small.style.backgroundColor="透明"
        }

    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス
  • JavaScript で虫眼鏡の特殊効果を実現
  • JavaScript が Jingdong の虫眼鏡の特殊効果を模倣
  • 虫眼鏡ケースのJavaScriptオブジェクト指向実装
  • JavaScript が Jingdong の虫眼鏡効果を模倣
  • JavaScript が Taobao の虫眼鏡効果を模倣
  • js で虫眼鏡効果を実現するためのアイデアとコード
  • 虫眼鏡の詳細のJavaScript実装

<<:  W3C チュートリアル (15): W3C SMIL アクティビティ

>>:  CSS の無効な行の高さ設定の問題の解決策

推薦する

MySQL データベースのデータ テーブルの最適化、外部キーの分析、3 つのパラダイムの使用

この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...

MySQL で URL タイムゾーンの罠を回避する方法

序文最近、MySQL 6.0.x 以降の jar を使用する場合、コード URL リンクで serv...

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

Docker で nginx の https を設定する方法

https をサポートしていない Web サイトは、ブラウザによって徐々に安全でないとマークされるた...

Webフロントエンド開発CSS関連チームコラボレーション

フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...

Vue 仮想 DOM の問題について

目次1. 仮想DOMとは何ですか? 2. 仮想 DOM が必要な理由3. 仮想DOMはどのようにして...

Vue コードの読みやすさに関するいくつかの提案

目次1. コンポーネントをうまく活用してコードを整理する1. UIコンポーネントを抽出する2. モジ...

Linux (Ubuntu) での MySQL 5.6.28 のインストールと設定のチュートリアル

mysql5.6.28のインストールと設定方法1. 基本的なシステム情報を確認し、yumでインストー...

Vueはブラウザ側のコードスキャン機能を実装します

背景少し前にブラウザカメラの取得とスキャンコード認識の機能を作りました。その際の知識ポイントと具体的...

Dockerはコンテナに入るためにnsenterツールを使用する

Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...

WeChatミニプログラムビデオ集中砲火位置ランダム

この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...

MySQL 8.0.12 インストール グラフィック チュートリアル

MySQL8.0.12 インストールチュートリアルをみんなで共有します。 1. インストール1.イン...

Linux サーバーに SSH パスワードなしでログインする方法

テスト サーバーにログインするたびに、必ず ssh ログインのパスワードを入力する必要があります。ロ...

Centos で MySQL パスワードを変更する方法

1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...

JavaScript リフレクション学習のヒント

目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...