Javascript 多幅图像中的动画效果

这是我的设想

我有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

为了让您更好地理解，我将代码放在了JSFIDLE中，请记下来

无论如何，我都做不到

请引导我

问候,，

---

阿伦

这会给你一个更好的开始

根据您共享的链接，代码中唯一需要的更改是在飞行图像的css中添加一个

position:absolute

属性

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

这是一张工作票

---

如果没有绝对位置，html元素有一个默认的

静态

位置值，因此元素按文档流中出现的顺序呈现

您可以在那里放置一些有效的图像。谢谢您的回复。我已经更新了，请检查。

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