javascript - 超时后图像不会重新出现在正确的位置

Question

ch 图像消失了，但是当它重新出现时，它从右向左移动！

function rest()
{
img = document.getElementById('ch');
img.style.position= 'absolute';
img.style.top = '0px';
img.style.left = '0px';
img.style.visibility='hidden';

setTimeout(function(){reappearch()},3000);
}
function reappearch(){
img = document.getElementById('ch');
img.style.visibility='visible';
}

我该怎么做

Answer 1

您可以使用img.style.display并将其设置为"none"，然后您不需要重新定位图像并将位置设置为绝对：

function rest() {
    img = document.getElementById('ch');
    img.style.display = 'none';

    setTimeout(function () {
        reappearch()
    }, 3000);
}

function reappearch() {
    img = document.getElementById('ch');
    img.style.display = 'block';
}

祝你好运...

Answer 2

您已在 rest() 中将 left 设置为 0px，因此它将向左侧。如果您不想将其显示在左侧，则需要在 reappearch() 函数中添加 img.style.left = '<>px'，例如 img.style.left='150px'。

function reappearch() {
    img = document.getElementById('ch');
    img.style.visibility = 'visible';
    img.style.left = '120px';
}

检查这个小提琴...... jsfiddle