Как я могу буферизовать изображение, показать его, когда я хочу, и быть в состоянии переместить его - PullRequest
Новая
       29

Как я могу буферизовать изображение, показать его, когда я хочу, и быть в состоянии переместить его

0 голосов
/ 11 января 2012

Я всегда искал, как это сделать, но не могу понять, как это сделать.Лучшее, что я сделал - сделал изображение с 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);

Ответы [ 2 ]

1 голос
/ 13 января 2012

Наконец-то я нашел отличный учебник по 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>
0 голосов
/ 11 января 2012

Несколько способов сделать это.

  1. Вы можете кэшировать изображение с помощью JavaScript, не отображая его:

    var img = new Image ();img.src = "http://PATH_TO_IMAGE";

При необходимости вы можете добавить этот элемент изображения на страницу.

  1. Вы можете добавить тег img на страницу, но установить изображениек невидимым (видимость: скрытый), или сделать его очень маленьким, например 1px x 1px. Браузер загрузит изображение, нарисует слот с изображением, но он будет прозрачным. Чтобы использовать этот метод, необходимо убедиться, что вы поместили это изображениегде-то пользователь этого не заметит.
...