简单的动画内容替换？

Question

我需要一些关于推进最佳方法或稳定插件/解决方案建议的建议。

基本上：

1. 我有2行，每行有3张图片，总共有6张图片。
2. 每张照片都是产品。
3. 点击链接将更改内容，以显示有关该产品的更多信息。

下图显示了我尝试完成之前和之后：

1. 单击6个图像中的一个时，内容区域应该更改，因此布局不同。
2. 新布局为： A. 顶部的放大内容区域。 B。底部有5个缩略图。



现在我不需要任何花哨的东西，我最想做的是：

1. 在页面加载时显示“之前”状态。一旦点击其中一个图像，我们就不需要再回到这种状态。

2. 如何从“之前”状态转换为“之后”状态。我认为这可能就像在一个div中保存两个状态一样简单，只有一个被隐藏起来或只是向上滚动或反弹，因此它要么覆盖“之前”状态要么将其推出内容区域所以它现在被隐藏了。

   • 类似于： http://webdeveloperpost.com/Articles/Create-your-own-sliding-divs-with-jQuery.aspx

3. 一旦处于“之后”状态，点击产品图片就可以淡入/淡出其上方的内容区域。

4. 虽然显示的产品不应该出现在底部，但为什么它只显示5张图片而不是6张...我绝对可以使用底部的所有6张图片来简化操作。

---

注意：

一个。我正在查看这两个教程，但它们实际上改变了所有页面内容。这对我不起作用，因为我在示例图像中显示的内容左侧有内容，我不希望它必须淡入淡出/加载和输出： - http://css-tricks.com/dynamic-page-replacing-content/ - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/comment-page-1/#comments

B中。想一想，也许为了保持一致，也许最好是：

• 从底部向上滑动“After”状态，将“之前”状态推出。
• 一旦处于“之后”状态，只需点击产品图片，就可以从左到右滑动产品信息。
• 因此底部仅显示5个产品图像，隐藏当前可查看产品的div。但是，我认为可能更容易只显示所有6。

我不确定如何实施上述内容会影响搜索引擎优化，但我知道除了隐藏一堆div并以某种方式利用jquery之外我无法完成其他任何工作。

Answer 1

这不难做到。我建议您将图像作为包含每个图像上包含数据的对象的数组提供。然后，在页面加载时，为每个图像创建一个“图块”并将它们放在一个框中。处理瓷砖上的点击并根据需要移动它们，甚至可以为产品信息创建div。

我很无聊所以我使用jQuery为你做了一个小例子：Example on JSFiddle

---

注意：我只测试了Chrome中的上述链接，因此Firefox，Opera等可能存在不一致。