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

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

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

Источник

2 ответа

Решение

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

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

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 предлагает несколько помощников, чтобы сделать его немного проще, но, как вы можете видеть, это довольно просто, даже без.

Источник

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

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

Источник
Другие вопросы по тегам