jqueryはサスペンドレイヤーを実装します

Web 開発では、フローティング レイヤーは一般的なインタラクション デザインであり、ページ エクスペリエンスをよりスムーズかつ優れたものにすることができます。 jQuery を使用すると、単純なフローティング レイヤー エフェクトを簡単に実装できます。

1. HTML 構造

まず、フローティング レイヤーのコンテンツを含む div タグが必要で、そのスタイル属性を設定しますdisplay は非表示にするための none です。フローティング レイヤーの表示をトリガーする別のボタン (button タグなど) を追加します。

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

<div id="float_box" style="display: none;">
    <!-- 悬浮层内容 -->
</div>
<button id="show_float_box">显示悬浮层</button>

2. CSS スタイル

フローティング レイヤーをページ上に浮かせるために、次のようにします。 CSS を使用して position:fixed 属性を設定する必要があります。同時に、浮遊層の位置とサイズ、その他の特性を決定する必要があります。

CSS スタイル コードは次のとおりです:

#float_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

ここでは、translate 関数を使用して水平方向と垂直方向を実現するために、フローティング レイヤーを垂直方向と水平方向の中央に配置するように設定します。中心にあります。 z-index この属性は、フローティング レイヤーがページ上で最上位のレベルになるように階層関係を定義するために使用されます。

3. JavaScript の実装

ページが読み込まれた後、フローティング レイヤーを表示できるようにボタンに click イベントを追加する必要があります。ボタンをクリックした後。ここでは、jQuery の click メソッドを使用してイベントをバインドします。

フローティング レイヤーを表示するには、jQuery の show メソッドを使用する必要があります。 duration 属性を設定することで、表示アニメーション効果を高めることができます。 fadeOut メソッドを使用して、フローティング レイヤに終了アニメーション効果を追加できます。フローティング レイヤの閉じるボタンをクリックするか、フローティング レイヤの外側の空白領域をクリックすると、フローティング レイヤは自動的に終了します。

JavaScript コードは次のように実装されます。

$(document).ready(function () {
    // 显示悬浮层
    $("#show_float_box").click(function () {
        $("#float_box").show(300);
    });

    // 悬浮层退出
    $("#float_box .close-btn").click(function () {
        $("#float_box").fadeOut(200);
    });

    $(document).click(function (event) {
        if (!$(event.target).closest("#float_box").length) {
            $("#float_box").fadeOut(200);
        }
    });
});

#show_float_box のクリック イベントと閉じるボタン .close-btn を定義しました。フローティングレイヤーは閉じるボタンをクリックした後に終了できることを確認します。同時に、$(document).clickを使用して、フローティングレイヤーのコンテンツの外側をクリックしてフローティングレイヤーを終了する機能を追加しました。

ついに、サスペンドレイヤーの実装が完了しました。

概要:

上記の手順により、簡単な浮遊層効果をすぐに実現できます。最初に HTML 構造を作成し、フローティング レイヤーの CSS スタイルを設計する必要があります。最後に、jQuery を使用して、フローティング レイヤーの表示と終了を行う JavaScript コードを制御します。フローティング レイヤーの実装は Web 開発において非常に実用的であり、ユーザーにより快適なエクスペリエンスを提供できます。

以上がjqueryはサスペンドレイヤーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。