简单的动画内容替换?

时间:2012-08-04 12:06:50

标签: jquery xhtml slider css-transitions

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

基本上:

  1. 我有2行,每行有3张图片,总共有6张图片。
  2. 每张照片都是产品。
  3. 点击链接将更改内容,以显示有关该产品的更多信息。
  4. 下图显示了我尝试完成之前和之后:

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

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

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

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

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

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


      5. 注意:

        一个。我正在查看这两个教程,但它们实际上改变了所有页面内容。这对我不起作用,因为我在示例图像中显示的内容左侧有内容,我不希望它必须淡入淡出/加载和输出: - 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之外我无法完成其他任何工作。

1 个答案:

答案 0 :(得分:2)

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

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


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