Question

我有一个脚本可以增加和减少一段时间的大小。最终结果是在保持静止状态的同时增加和减小一段时间。

我遇到的当前问题是当尺寸增加（或减少）时，元素将向下和向上移动（分别）。

为了解决这个问题，我试图在字体大小增加时调整填充。此调整不起作用，元素继续移动。

这是我的Javascript：

window.dotFluxOut = true;
var i = 1;
var pad = 50;

var dots = window.setInterval(function () {
    var wait = document.getElementById("wait");

    if (window.dotFluxOut) {
        wait.style.fontSize = i + "px";
        wait.style.padding = (pad - i) + "px";
        i++;
    } else {
        wait.style.fontSize = i + "px";
        wait.style.padding = (pad - i) + "px";
        i--;
    }

    if (parseInt(wait.style.fontSize.replace("px", "")) > 180) {
        window.dotFluxOut = false;
    } else if (parseInt(wait.style.fontSize.replace("px", "")) < 3) {
        window.dotFluxOut = true;
    }

}, 5);

这是我的HTML：

<p id="wait" align="center" style="font-size: 160px">.</p>

修改

如果您希望看到它正在运行：JSFiddle

Answer 1

你需要设置点容器的行高等于它的高度。

Answer 2

我认为问题是行高会随着字体大小自动变化，与

标签相关的边距也是如此。

如果您最初将行高设置为略大于最大字体大小，则应该有助于解决此问题。

e.g。

<p id="wait" align="center" style="font-size: 160px; line-height:200px; margin:0">.</p>

第二个问题是句号/句号字符上方和下方的空格随着字体大小的变化而增长，即允许高字符（bdfhijklt）和带尾音的字符（gjpqy）。

我想出的最好的是：

<p align="center" style="margin:0"><span id="wait" style="font-size:160px">.</span><span style="font-size:200px">&nbsp;</span></p>

希望它有所帮助。

使用Javascript动态调整HTML元素的定位

2 个答案: