如何使用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之间的随机浮点数，然后将其乘以Math.floor以获得更改坐标的整数。

实施例

这会创建一个50,50的图像并以5秒的时间每隔五分之一秒（以非常紧张的随机方式;我没有花费任何时间让它看起来很漂亮），然后移除它：

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提供了一些帮助，使它更简单，但正如你所看到的，即使没有它，它也非常简单。

Answer 2

还有一个jQuery函数可以用来移动东西。

请参阅以下示例： http://api.jquery.com/animate/