0

firebugのように各要素を個別に検査するための要素オプションを検査してWebサイトを構築しています。選択した要素以外のすべての要素をぼかす新しいバージョンの Firefox のようなスタイルを構築するのが好きです。これを行う方法について何か考えはありますか？必要な出力の例を以下に示します。

編集:ここで、選択する必要がある要素のDOM階層が他の要素よりも低い場合があることに注意してください。たとえば。本体コンテナーをグレー表示する必要がある場合があり、グレー効果を持たない内部要素を選択した場合。

ここに画像の説明を入力

4

3 に答える 3

1

このようなもの：

http://jsfiddle.net/lollero/T7PyK/

いずれかの要素をクリックすると、オーバーレイが表示され、要素が分離されます。オーバーレイをクリックすると元に戻ります。

JS：

$('*').on("click", function( e ) {

    e.stopPropagation();

    var self = $(this),
        overlay = $('#overlay');

    if ( !self.hasClass('active') ) {

        if ( self.is(':not(#overlay)') ) {
            self.addClass('active');
        }
        overlay.fadeTo(400, 0.7);

    }
    if ( self.hasClass('active') ) {

        overlay.on("click", function() {
            overlay.fadeOut(400, function() {
                self.removeClass('active');
                });
        });

    }

});
​

CSS：

#overlay {
    display: none;
    background: #000;
    position: fixed;
    z-index: 100;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.active {
    position: relative !important;
    z-index: 101 !important;
    background: #fff;
    box-shadow: 0px 0px 50px #111;
}
​

HTML：

<div id="overlay"></div>
于 2012-07-13T11:45:14.960 に答える
1

背景色を黒、幅/高さを 100%、絶対位置と左/上を 0、不透明度を 0 から 1 (例: 0.5) に設定した div を配置します。これにより、「ページ効果をグレーアウト」できます。

次に、グレー表示したくないテキストを、DOM 階層の上位にある (または同じレベルで z-index が高い) 別の div に配置して、グレー表示で覆われないようにします。 -out div。

于 2012-07-12T18:39:22.717 に答える
0

いくつかの CSS と一緒に jQuery オーバーレイ効果を使用できます。

このリンクをクリックしてください: http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/

于 2012-07-12T18:56:17.140 に答える