交换图像翻转中心的网站

Question

由于某种原因，我无法得到一些工作。我想做的就是在页面的中心放置一个图像（这是页面上唯一的内容），当我翻转它时，它会变为另一个图像。

我能够使用jquery进行翻转效果，并且能够将图像居中在页面上。但是我无法将它们组合在一起。因为jquery的翻转效果是使用绝对位置。

请帮忙吗？

提前致谢！

Answer 1

您可以使用此类javascript完成这两项操作

$(".container img").hover(function() {  
  $(".container img").toggle();
});

并在您的HTML中

<div class="container">
  <img src="http://www.placehold.it/140x140&text=Image%201" />
  <img style="display:none;" src="http://www.placehold.it/140x140&text=Image%202" />
</div>

一个简单的实例：http://jsbin.com/agirul/1/edit

Answer 2

您可以尝试将图像包装在div中，并将其放在页面上，并且位置相对，这样您的图像就会与该div相关而不是文档正文。