javascript - 多个图像中的动画效果

Question

这是我的场景，

我的网页顶部有 4 张图片，名为 img1、img2、img3、img4。

现在我的网页底部也有 4 张图片，名为 fly1、fly2、fly3、fly4

现在，我的屏幕上有一个名为“完成”的按钮。当我点击它时，底部显示的图像应该飞过并固定在顶部显示的图像上，如下图所示，

fly1 fly and fix over img3
fly2 fly and fix over img1
fly3 fly and fix over img4
fly4 fly and fix over img2

为了您更好地理解，我已将我的代码放在 jsffiddle 中，请记下它。

http://jsfiddle.net/premkumar_ks16/a09bshb7/29/

无论如何我都无法实现

请指导我

问候， 阿伦

Answer 1

根据 js fiddle您共享的链接，您的代码中唯一需要更改的是向飞行图像的 css 添加 position: absolute 属性

$("#fly1").css({
    "top": v.top + "px",
    "left": v.left + "px",
    "position": "absolute",
});

这是一个有效的 fiddle .

没有绝对位置，html 元素有一个默认的 static 位置值，因此元素按文档流中出现的顺序呈现