如何使用javascript移动图像？ [英] How to move around an image with javascript?

问题描述

我正在开发一个简单的网络测验并使用javascript，我想创建一个效果，显示一个小图像（1UP），当用户达到特定级别或分数时，它会在游戏套牌周围徘徊;用户只需及时点击即可获得额外的生命。

I'm developing a simple web quiz and using javascript, I would like to create an effect that displays a small image (1UP) that wanders around the "game deck" when users reach a specific level or score; user could gain an extra life simply clicking on it in time.

你知道任何Jquery插件或javascript片段来实现这样的效果吗？

Do you know any Jquery plugin or javascript snippet to achieve an effect like this?

推荐答案

实际上这很容易实现：

img = document.createElement('img');

设置来源：

Set its source:

img.src = "myimage.png";

绝对定位如此：

Position it absolutely and such:

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

（显然，请使用您想要的任何坐标和尺寸。）

(Obviously, use whatever coordinates and size you want.)

您可能希望确保它显示在其他内容之上：

You may want to make sure it appears above other things:

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

将其添加到文档中：

Add it to the document:

document.body.appendChild(img);

移动它

使用 window.setInterval （或 setTimeout 取决于你想怎么做）通过更改<$ c $来移动它c> style.left 和 style.top 设置。您可以使用 Math.random 来获取0到1之间的随机浮点数，并将其乘以并运行 Math.floor 获取更改坐标的整数。

Move it around

Use window.setInterval (or setTimeout depending on how you want to do it) to move it around by changing its style.left and style.top settings. You can use Math.random to get a random floating point number between 0 and 1, and multiply that and run it through Math.floor to get a whole number for changing your coordinates.

这将创建一个图像50,50并以一种非常紧张的随机方式给它动画（我没有花任何时间使它看起来很漂亮），每五分之一秒，持续10秒，然后移除它：

This creates an image at 50,50 and animates it (in a very jittery random way; I didn't spend any time making it look nifty) every fifth of a second for 10 seconds, then removes it:

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 在你完成后取消它。）

(I prefer re-scheduling on each iteration via setTimeout [as above] to using setInterval, but it's totally your call. If using setInterval, remember the interval handle [return value from setInterval and use window.clearTimeout to cancel it when you're done.)

以上是原始DOM / JavaScript; jQuery提供了一些帮助，使它更简单，但正如你所看到的，即使没有它，它也非常简单。

The above is raw DOM/JavaScript; jQuery offers some helpers to make it a bit simpler, but as you can see, it's pretty straightforward even without.

这篇关于如何使用javascript移动图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！