Javascript 如何缓冲图像、在需要时显示图像以及如何移动图像_Javascript_Image_Animation

Javascript 如何缓冲图像、在需要时显示图像以及如何移动图像

javascript image animation

Javascript 如何缓冲图像、在需要时显示图像以及如何移动图像,javascript,image,animation,Javascript,Image,Animation,我一直在寻找如何做到这一点，但不知道怎么做。我所做的最好的事情就是用HTML制作一个图像。我试图编辑图像设置，就像使用document.getElementById（）来更改文本一样，但我无法让它工作我的代码到目前为止 function run() { x++; y++; if (x==10 || x==30) { exmp.visibility = show //doesn't work } if (x==20 || x==40

我一直在寻找如何做到这一点，但不知道怎么做。我所做的最好的事情就是用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);

函数运行（）{
x++；
y++；
如果（x==10 | | x==30）{
exmp.visibility=show//不起作用
}
如果（x==20 | | x==40）{
exmp.visibility=hidden//不起作用
}
如果（x==50）{
x=0
y=0
}
document.getElementById（“exmp”）.style=“位置：绝对；顶部：0px；左侧：0px；宽度：239px；高度：74px”//不起作用
}
x=0
y=0
文件。填写（“”）；
设置间隔（运行，33）；

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

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

var img=新图像（）； img.src=“http://指向图像的路径”

需要时，可以将此图像元素附加到页面

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

我终于找到了一个关于移动图像并在需要时显示它们的优秀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>


移动图像
DIV.movable{位置：绝对；}
document.getElementById（“exmp”）.style.visibility='hidden'；
函数运行（）{
pos++；
如果（位置=10 | |位置=30）{
document.getElementById（“exmp”）.style.visibility='visible'；
}
如果（位置==20 | |位置==40）{
document.getElementById（“exmp”）.style.visibility='hidden'；
}
如果（位置==40）{
pos=0；
}
//document.getElementById（“exmp”）.style=“位置：绝对；顶部：”
//+pos+“px；左：“+pos+”px；宽度：239px；高度：74px”；
document.getElementById（“exmp”）.style.left=pos+“px”；
document.getElementById（“exmp”）.style.top=pos+“px”；
//STYLE=“位置：绝对；顶部：0px；左侧：0px；宽度：239px；高度：74px”
}
pos=0；
设置间隔（运行，33）；

请显示您迄今为止尝试过的内容的摘录。您试图修改哪些“设置”？你想对这个图像做什么？让它在页面上飞来飞去？调整它的大小？把兔子拉出来？我们需要更多的细节来帮助我如何将图像设置为可见？更改元素的样式，例如：img{visibility:hidden；}