虫眼鏡効果を実現するJavaScript

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

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

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

1. まず、HTML と CSS を使用して全体のレイアウト、つまり隣接する 2 つのボックス A と B、および左側のボックス A 内の小さなボックス S を計画する必要があります。隣接性を実現するために、私が採用した方法は、両方にposition:absoluteを設定し、次に隣接するようにleftとtop値を設定するというものでした。
小さなボックス 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 を応援していただければ幸いです。

以下もご興味があるかもしれません: