简单的动画内容替换？

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 张图片都放在底部以使事情变得更容易。

---

注意事项：

A.我正在查看这两个教程，但它们实际上更改了所有页面内容。这对我不起作用，因为我在示例图像中显示的左侧有内容，我不希望它必须淡入和淡出： - 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.想一想，也许为了保持一致，也许最好：

• 从底部向上滑动“之后”状态，将“之前”状态推开。
• 一旦处于“之后”状态，点击产品图片后，只需从左向右滑动产品信息即可。
• 所以底部只显示5个产品图片，隐藏当前可见产品的div。不过，我认为始终显示全部 6 个可能会更容易。

我不确定实现上述内容会如何影响 SEO，但除了隐藏一堆 div 并以某种方式使用 jquery 之外，我不知道其他方法可以完成我正在做的事情。

Answer 1

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

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

---

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