javascript - 将一张图片翻转成另一张图片

Question

我正在尝试使鼠标悬停在图像上时具有翻转动画。有点像命运之轮的卡片翻转，除了它的一侧是一个图像而另一侧是图像的不同版本。我有什么想法吗？

<img src="image1.jpg" onmouseover="this.src='image2'" onmouseout="this.src='image1'" />

我在网上查找它，我看到了如何使图像旋转而不是翻转到另一个图像。任何让我开始的想法都将不胜感激

Answer 1

我建议看一下 this article .

本质上，您要做的是将两个图像作为单独的图像对象

<img src="image1.jpg"/>
<img src="image2.jpg"/>

要切换的东西(在文章的例子中，是一个 anchor )

<a href="index.html" onMouseOver="SwapOut()" onMouseOut="SwapBack()"> 

最后是存储它的东西(另一张图片)

<img name="flippr" src="image1.jpg"></a>