当前位置：文江博客话题详情

CSS 图像查看器 - 对齐屏幕中心

发布于 2024-08-21 06:37:15 字数 308 浏览 4 评论 0原文

我想使用下面的图像放大器/查看器，但我希望放大图像的弹出窗口出现在屏幕中央。

http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/< /a>

我尝试了很多方法，但没有成功......

对此的任何帮助将不胜感激。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心房的律动 2024-08-28 06:37:15

为了解决这些问题，我通常使用 JavaScript 查询 DOM 以找出窗口的大小。然后我使用：

document.getElementById('popup').style.top = window_height - popup_height / 2;
document.getElementById('popup').style.left = window_width - popup_width / 2;

弹出窗口的定位必须在 CSS 中设置为“绝对”。为了获得高度（与宽度相同），我使用：

if (document.body.clientHeight) {
    window_height = document.body.clientHeight;
} else {
    window_height = window.innerHeight;
}

如果你的 div 没有 id，你仍然可以将对象引用传递给 JavaScript 函数，例如：

<div class='popup' onmouseover='javascript:openPopup(this);'> ... </div>

并且，在附近的一段代码中：

function openPopup(element) {

    // Get window's height and width using the code above

    element.style.top  = window_height - popup_height / 2;
    element.style.left = window_width - popup_width / 2;

}

也就是说，而不是查询 DOM要通过 ID 获取对象，可以直接将对象传递给 JavaScript 函数。

To solve these issues I usually query the DOM with JavaScript to find out the size of the window. I then use:

document.getElementById('popup').style.top = window_height - popup_height / 2;
document.getElementById('popup').style.left = window_width - popup_width / 2;

The positioning of the popup must be set to 'absolute' in the CSS. To get height (same for width) I use:

if (document.body.clientHeight) {
    window_height = document.body.clientHeight;
} else {
    window_height = window.innerHeight;
}

If your div doesn't have an id you can still pass the object reference to the JavaScript function like:

<div class='popup' onmouseover='javascript:openPopup(this);'> ... </div>

And, in a nearby piece of code:

function openPopup(element) {

    // Get window's height and width using the code above

    element.style.top  = window_height - popup_height / 2;
    element.style.left = window_width - popup_width / 2;

}

That is, instead of querying the DOM to get the object by the ID, you directly pass the object to the JavaScript function.

回复收藏 0 原文