1

画面を黒く塗りつぶし、画像を画面の中央、他のすべての要素の上に配置しようとしています。私が持っているものは機能しません（画像が中央に配置されている部分）。

注-私はおそらくこれのためのプラグインがあることを知っています..しかし私はそれを行う方法とそれがどのように機能するかを理解しようとしています。

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay").height(docHeight).css({
    'opacity': 0.4,
    'position': 'relative',
    'top': 0,
    'left': 0,
    'color': 'white',
    'background-color': 'black',
    'width': '100%',
    'z-index': 5000
});

$("#overlay").append("<div id='image-container'><img id='photo' src='" + $(this).attr('rel') + "' alt='image' /></div>");

$("#image-container").css("position", "absolute");
$("#image-container").css("top", Math.max(0, (($(window).height() - $("#image-container").outerHeight()) / 2) + $(window).scrollTop()) + "px");
$("#image-container").css("left", Math.max(0, (($(window).width() - $("#image-container").outerWidth()) / 2) + $(window).scrollLeft()) + "px");

CSS：

#image-container {
    background: #FF0000;
    z-index: 999999;
}

私が表示している画像は、画面の右下にあります。中央ではありません。私は何が間違っているのですか？

ここにJsFiddle

4

3 に答える 3

1

要素を垂直方向にセンタリングするのは難しいです。簡単な回避策は、画面を覆う要素の背景を中央に配置することです。

#overlay {
    /*Cover the entire screen regardless of scrolling*/
    position:fixed;top:0;right:0;bottom:0;left:0;
    background: #ff0000 url(...) no-repeat 50% 50%;
}

デモ目的で半透明の bgcolor をいじった

于 2012-06-21T02:21:47.957 に答える
0

これは純粋なCSSで行うことができます：http：//jsfiddle.net/5rRqS/2/（すべてのブラウザーについてはわかりません）。

スクリプトを実行する場合、画像のwidth=0pxとheight=0であるため、JSを使用する場合は、画像の読み込み後にポジショニングスクリプトを実行するか、画像の幅と高さを（属性またはスタイルによって）追加する必要があります。

次に、次のようなものを使用します

$(img).load(function(){
   // positioning script here
})
于 2012-06-20T22:49:12.713 に答える
0

オーバーレイを幅と高さを100％、大きなzindexで固定配置することができます。これで、ドキュメント全体ではなく、ウィンドウ全体をカバーする透明な黒いdivができました。これは固定されているため、ページをスクロールしてもスクロールしません。次に、画像を中央に配置するには、簡単な計算を使用します。1つの方法は、左を50パーセント、次にマージン左を-（画像の幅/ 2）として絶対位置に配置された画像を作成することです。これは、画像の幅がすべての場合で同じであり、cssに追加できる場合に役立ちます。その場合、jqueryを使用してオーバーレイdivをフェードインおよびフェードアウトする必要があります。私はモバイルを使用しているため、今のところコードはありません。

于 2012-06-20T22:40:47.297 に答える