jquery - 交换站点的图像翻转中心

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 而不是文档正文相关。