JQuery：Gowalla如何执行它的“幻灯片”效果？

Question

Gowalla.com如何在首页上执行幻灯片效果？

什么JQuery效果可以模仿滑动效果的功能？

Answer 1

在jQuery中，你可以使用slideDown做类似的事情，但Gowalla似乎使用了稍微不同的方法：

各个面板位于父面板内，该面板会定期更改其位置。也就是说，面板本身不是动画，甚至没有改变尺寸：它只是通过视口移动所有面板。当它到达底部时，Gowalla页面就会停止 - 它实际上会加载足够的面板大约4分钟的滑动 - 但在您的情况下，您可能需要从底部取下面板并将它们推回顶部以使其连续

Answer 2

恰当地命名为slideDown()。

Answer 3

我认为他们所做的与nickf提到的相似。 为了创建动画效果，我认为所做的就是为包围面板的div容器的位置设置动画。

因此父面板将具有仅适合6个面板的视口。 另一个div容器将环绕所有面板。使用jQuery .animate（）来移动div的顶部位置属性。每次迭代都会将div容器向下移动一个面板的高度（例如100px）。

var numPanels = 20;
var i = 1;

var livePanel = setInterval(function() {
  if (i < numPanels) {
    $('div.wrap').animate({'top': '+100px'}, 500, 'swing');
    i++;
  } else {
    livePanel.clearInterval();
  }
}, 1000);

这只是我认为它可行的粗略代码。您还需要考虑任何时候视口中的面板数量，并在numPanels中从您想要的“向下移动”总数中减去该数量。