0

我正在编写一个灯箱图片库，并为正确的图片定位而苦苦挣扎。

单击图像时，会出现灯箱。这是一个用 JS 生成的全新对象。通过设置边距，我将其移动到屏幕中间（使用 z-index）。

但是这些操作是在图像有时间加载之前执行的。所以 JS 没有所需的信息clientWidth，而是clientHeight使用0。这会影响图像的左上角（在加载之前也与其他角相同）位于屏幕中间。当图像开始加载时，它将扩展到右下角。

如何在屏幕上正确定位图像？

PS：没有连接到 lightbox/lightbox2 库。

PPS：相关代码：

JS：

function lightbox(res, dsc) {
    // lbimg: Lightbox-Image
    var lbimg = document.createElement("img");
    lbimg.src = res;
    lbimg.id = "lbimg";
    document.body.insertBefore(lbimg, document.body.firstChild);
    lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2.) + "px";
    lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2.) + "px";
}

CSS：

#lbimg {
    max-width: 70%;
    max-height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 10px solid #fff;
    z-index : 10;
}

HTML（仅显示微型图像）：

<div class="list">
    <div><a onclick="lightbox('image.JPG', ''); "><img class="mini" src="image.JPG_MINI.jpg" /></a></div>
    <!--other images are defined analogous-->
</div>
4

2 回答 2

0

尝试将您的保证金计算包含在 onload 调用中：

lbimg.onload = function () {
    lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2.) + "px";
    lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2.) + "px";
};

这将确保高度和宽度可供 JS 使用，以便正确计算边距。

于 2013-08-03T13:45:43.000 回答
0 
function lightbox(res, dsc) {
    var lbimg = document.createElement("img");
    lbimg.id = "lbimg";
    lbimg.onload = function() {
        document.body.insertBefore(lbimg, document.body.firstChild);
        lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2) + "px";
        lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2) + "px";
    };
    lbimg.src = res;
}

您必须将 DOM 插入和样式设置都包装在负载处理程序中（如果仅包装样式更改，您将在插入后看到元素“移动”）。还要在绑定加载处理程序后设置您的 src ，否则 Internet Explorer 可能会错过处理程序（从缓存加载图像时）。

于 2013-08-03T14:05:45.317 回答