Question

我永远看着如何做到这一点，但无法弄清楚如何做到这一点。我所做的最好的是用HTML制作图像。我尝试编辑图像设置，就像你使用document.getElementById()更改文字一样，但是我无法让它工作。

我的代码到目前为止......

    function run() {
    x++;
    y++;
    if (x==10 || x==30) {
        exmp.visibility = show //doesn't work
    }
    if (x==20 || x==40) {
        exmp.visibility = hidden //doesn't work
    }
    if (x==50) {
        x=0
        y=0
    }
    document.getElementById("exmp").style = "position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px" //doesn't work
}
x=0
y=0
document.write("<div ID=\"exmp\"; STYLE=\"position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px\">  <IMG SRC=\"exmp.png\"; alt=\"image\"> </div>");
setInterval(run,33);

Answer 1

我终于找到了一个很棒的java脚本教程，用于移动图像并在需要时显示它们。（http://www.openjs.com/tutorials/advanced_tutorial/moving.php）

我的工作代码：

<html>

<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>

<body>
<div ID="exmp"; class = "movable";>
<IMG SRC="exmp.png"; alt="image"/>
</div>
<script type="text/javascript">
document.getElementById("exmp").style.visibility='hidden';

function run() {
    pos++;
    if (pos==10 || pos==30) {
        document.getElementById("exmp").style.visibility='visible';
    }
    if (pos==20 || pos==40) {
        document.getElementById("exmp").style.visibility='hidden';
    }
    if (pos==40) {
        pos=0;
    }
    //document.getElementById("exmp").style = "position:absolute; TOP:"
     //      +pos+"px; LEFT:"+pos+"px; WIDTH:239px; HEIGHT:74px";
    document.getElementById("exmp").style.left = pos+"px";
    document.getElementById("exmp").style.top = pos+"px";
    //STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px"
}
pos=0;
setInterval(run,33);

</script>
</body>
</html>

Answer 2

有几种方法可以做到这一点。

您可以使用JavaScript缓存图像而不显示它：

var img = new Image（）; img.src =“http：// PATH_TO_IMAGE ”;

如果需要，您可以将此图像元素附加到页面。

您可以向页面添加img标签，但将图像设置为不可见（可见性：隐藏），或将其设置得非常小，例如1px x 1px。浏览器将加载图像，绘制图像插槽，但它是透明的。要使用此方法，您需要确保将此图像放在用户不会注意到的位置。

如何缓冲图像，在我想要的时候显示它，并能够移动它

2 个答案: