Javascript 在稳定的背景下点击png图像转换

我无法做到这一点，我已经用了好几样东西，我已经浪费了将近2天的时间来制作这件东西，但仍然没有得到我客户想要的东西

在看到图像后，你可能会明白我在寻找什么，我正在尝试在点击时移动png图像，将会发生的是用户点击的png图像将取代前面的png，并且背景将保持稳定

这是指向图像的链接：

提前感谢。

您是在搜索一个应用程序，还是想自己实现

如果您确实需要我们的帮助，请提供JSFIDLE。我只能做一些假设，给出一些一般性的建议；背景图像应与要翻译（并进行转换）的图像分开。每个图像都需要自己的单击事件（或文档上的观察者）。当用户单击时，找出当前图像所在的位置。查找当前图像应位于的图像。获取位置。更改图像的顶部/左侧样式值

---

当然，您需要一个

[browser prefix]-transition:all 2s linear

在每个应该转换的元素上

据我所知，您基本上希望为图像（-holder）设置新的css值

$（'yourelementid'）。设置动画（高度=新高度，宽度=新宽度，其他属性=新属性）

如果您已经知道所需的值，那么应该非常直接

这是$.animate（）的手册页

提示：在你提供的作为参考的站点中，他使用一个单独的图像在点击时显示，而不是将现有的图像移动到中心

您可以使一个不可见元素的绝对位置位于中心，然后单击“用选定图像填充它”，并使其可见

希望这有帮助

试试这个jQuery插件