javascript - 如何使用 javascript 在图像中移动？

Question

我正在开发一个简单的网络测验并使用 javascript，我想创建一个效果来显示一个小图像 (1UP)，当用户达到特定级别或分数时，该图像会在“游戏面板”周围徘徊；用户只需及时点击它就可以获得额外的生命。

你知道有什么 Jquery 插件或 javascript 片段可以实现这样的效果吗？

Answer 1

这实际上非常容易:

创建元素:

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 之间的随机 float ，并将其相乘并通过 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 提供了一些帮助程序以使其更简单一些，但如您所见，即使没有帮助程序也非常简单。