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

您可以使用宽度和高度 100% 和大 zindex 将覆盖固定定位。现在你有一个透明的黑色 div 覆盖整个窗口，而不是你尝试的整个文档。由于我们已将其定位固定，因此即使您滚动页面也不会滚动。现在使用您的简单数学来居中图像。一种方法是使图像定位为绝对，left 为 50%，然后 marginleft 为 -(width of image/2)。如果所有情况下的图像宽度都相同并且可以在 css 上添加，这将很有用。在这种情况下，您只需要使用 jquery 淡入和淡出覆盖 div。因为我在手机上，所以暂时没有代码。

于 2012-06-20T22:40:47.297 回答
0

您可以使用纯 CSS 执行此操作：http: //jsfiddle.net/5rRqS/2/（我不确定所有浏览器）。

当你的脚本运行时图像的宽度=0px 和高度=0 所以，如果你想使用 JS，你必须在加载图像后运行定位脚本，或者添加图像的宽度和高度（通过属性或样式）

然后使用类似的东西

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