Как передвигаться по изображению с помощью JavaScript? - PullRequest
Новая
       37

Как передвигаться по изображению с помощью JavaScript?

3 голосов
/ 31 января 2010

Я занимаюсь разработкой простой веб-викторины и использую javascript. Я хотел бы создать эффект, который отображает маленькое изображение (1UP), которое блуждает по «игровой колоде», когда пользователи достигают определенного уровня или счета; пользователь может получить дополнительную жизнь, просто нажав на нее вовремя.

Знаете ли вы какой-нибудь плагин Jquery или фрагмент JavaScript, чтобы добиться такого эффекта?

Ответы [ 2 ]

8 голосов
/ 31 января 2010

На самом деле это удивительно легко сделать:

Создать элемент: 

img = document.createElement('img');

Установить источник: 

img.src = "myimage.png";

Позиционируйте его абсолютно и так: 

img.style.position = "absolute";
img.style.left = "50px";
img.style.top = "50px";
img.style.width = "50px";  // Make these match the image...
img.style.height = "50px"; // ...or leave them off

(Очевидно, используйте любые координаты и размер, которые вы хотите.)

Возможно, вы захотите убедиться, что он отображается над другими вещами: 

img.style.zIndex = 100; // Or whatever

Добавить в документ: 

document.body.appendChild(img);

Переместить его

Используйте window.setInterval (или setTimeout в зависимости от того, как вы хотите это сделать), чтобы переместить его, изменив настройки style.left и style.top. Вы можете использовать Math.random, чтобы получить случайное число с плавающей запятой в диапазоне от 0 до 1, умножить его и пропустить через Math.floor, чтобы получить целое число для изменения ваших координат.

Пример

Это создает изображение в 50,50 и анимирует его (очень нервным случайным образом; я не тратил время, чтобы оно выглядело изящно) каждую пятую секунды в течение 10 секунд, а затем удаляет его: 

function createWanderingDiv() {
    var img, left, top, counter, interval;

    img = document.createElement('img');

    img.src = "myimage.png";

    left = 200;
    top  = 200;
    img.style.position = "absolute";
    img.style.left = left + "px";
    img.style.top = top + "px";
    img.style.width = "200px";  // Make these match the image...
    img.style.height = "200px"; // ...or leave them out.

    img.style.zIndex = 100; // Or whatever

    document.body.appendChild(img);

    counter = 50;
    interval = 200; // ms
    window.setTimeout(wanderAround, interval);

    function wanderAround() {

        --counter;
        if (counter < 0)
        {
            // Done; remove it
            document.body.removeChild(img);
        }
        else
        {
            // Animate a bit more
            left += Math.floor(Math.random() * 20) - 10;
            if (left < 0)
            {
                left = 0;
            }
            top  += Math.floor(Math.random() * 10)  - 5;
            if (top < 0)
            {
                top = 0;
            }
            img.style.left = left + "px";
            img.style.top  = top  + "px";

            // Re-trigger ourselves
            window.setTimeout(wanderAround, interval);
        }
    }
}

(Я предпочитаю повторное планирование на каждой итерации с помощью setTimeout [как указано выше], чем использование setInterval, но это полностью ваш вызов. Если вы используете setInterval, помните дескриптор интервала [возвращаемое значение из setInterval и используйте window.clearTimeout, чтобы отменить его, когда закончите.)

Выше приведен необработанный DOM / JavaScript; jQuery предлагает несколько помощников, чтобы сделать его немного проще, но, как вы можете видеть, это довольно просто, даже без.

2 голосов
/ 03 июня 2013

Есть также функция jQuery, которую можно использовать для перемещения вещей.

См. Это для примеров: http://api.jquery.com/animate/

...