Question

我有一个边缘到边缘的视频，动态调整大小到浏览器，想立即将它放在页面上。由于视频大小不一，我需要使用JavaScript。

你们可爱的人帮助我正确的语法，这是我遇到的一个主要问题，但我仍然没有看到我正在寻找的结果。

理论是该函数测量浏览器视口的宽度和高度以及视频的宽度和高度，从浏览器中减去视频，然后将其除以2，并将其应用为left和top CSS中的值。视频设置为position:absolute位于设置为position:fixed的div中。

更新：

考虑到@ Guffa的建议，我将视频定义为变量并直接将样式应用于它。代码是声音并且没有显示错误，但我没有看到结果。老实说..已经尝试了几天，无法弄明白。

更新：

通过注释下面的第4行和第5行来测试代码并添加vid.style.left = (500) + "px";和那个WORKED ..还使用vid.style.left = (windowWidth) + "px";进行了测试，并且工作...这意味着代码在{{ 1}}。该行的逻辑是计算视频的现有宽度......问题是什么？

测试页面：http://kzmnt.com/test/

第55至59行有问题（为便于阅读而重新格式化）：

parseInt(vid.style.width,10)

想法？

感谢您的帮助！

Answer 1

您得到的错误来自不匹配的括号。

只是添加一些括号不会使代码工作。代码将元素除以2，然后从窗口宽度中减去该元素，这将元素放在窗口的中间。

您应首先从窗口宽度中减去元素宽度，然后除以2：

this.style.left = ((windowWidth - parseInt(this.style.width,10)) / 2) + "px";
this.style.top = ((windowHeight - parseInt(this.style.height,10)) / 2) + "px";

编辑：

由于未在视频元素上设置宽度和高度样式，您必须选择为其计算的大小。它放在宽度和高度HTML属性中，因此您可以获取这些值并解析它们。

element.style.left = ((windowWidth - parseInt(element.width)) / 2) + "px";
element.style.top = ((windowHeight - parseInt(element.height)) / 2) + "px";

Answer 2

JavaScript错误的原因是您的括号不匹配。

//                                           add paren here ------------v
this.style.left = (windowWidth  - (parseInt(this.style.width,10)  / 2  )) + 'px';
//                                                and here ------------v
this.style.top  = (windowHeight - (parseInt(this.style.height,10) / 2 )) + 'px';

（另请注意Guffa's point关于稍微偏离的计算。）

偏离主题：看起来您的元素使用绝对定位并具有特定宽度。如果是这样，我不会立即看到你为什么需要JavaScript来进行定位;使用CSS可能会更好：将left设置为“50％”，然后将margin-left设置为元素宽度的一半。 E.g：

#yourElementId {
    position:    absolute;
    width:       500px;  /* Or whatever */
    left:        50%;
    margin-left: -250px; /* Half of `width` above */
}

Live example

我相信它的宽度/高度也是百分比（seems to），但我不是CSS大师......

Answer 3

在两行中，您有3个左括号，但只有2个右括号。

Answer 4

var windowWidth = document.viewport.getWidth();
var windowHeight =  document.viewport.getHeight();
var vid = document.getElementById('live');
vid.style.left = ((windowWidth - (vid.width)) / 2) + "px";
vid.style.top = ((windowHeight - (vid.height)) / 2) + "px";

使用Prototype中的JavaScript发布动态大小的对象集中

4 个答案:

编辑：