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

Question

I have a script that will increase and decrease the size of a period. The end result is to have a period that will increase and decrease in size while remaining stationary.

The current problem I am having is when the size is increased (or decreased), the element will move down and up the page (respectively).

To counter this, I have attempted to adjust the padding as the font size is increased. This adjustment doesn't work, and the element continues to move.

Here is my 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);

Here is my HTML:

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

EDIT:

If you would like to see it running: JSFiddle

Answer 1

您需要将点容器的行高设置为等于其高度。

Answer 2

I believe the problem is that the line-height is automatically changing with with font-size as is the margin associated with the

tag.

If you initially set to line height to be the slightly bigger than the maximum font size this should help resolve the issue.

eg

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

The second problem is that the white space above and below the period/full-stop character grows with the change in font-size ie to allow for the tall characters (bdfhijklt) and the characters with tails (gjpqy).

The best I have come up with is:

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

Hope it helps.