当前位置：文江博客话题详情

如何使用 javascript 移动图像？

发布于 2024-08-19 18:21:01 字数 156 浏览 3 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谢绝鈎搭 2024-08-26 18:21:01

实际上，做到这一点非常容易：

创建元素：

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来移动它code> 和 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 提供了一些帮助程序，使其变得更简单，但正如您所看到的，即使没有，它也非常简单。

It's actually surprisingly easy to do this:

Create the element:

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);

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.

Example

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);
        }
    }
}

(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.)

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.

回复收藏 0 原文