如何滑动整个网页？答案

【问题标题】：How to slide entire webpage?如何滑动整个网页？
【发布时间】：2011-12-28 05:49:02
【问题描述】：

退出并尝试点击按钮“登录”、“注册”、“你会喜欢 Tumblr 的 30 个理由”（特别有趣）。

如何制作这种幻灯片效果？

P.S：我不是要求为我提供工作代码，只是指导和建议。

UP: 似乎我找到了可能的解决方案。来自 tumblr js 文件的代码。

return new Effect.Move(element, {
x: initialMoveX,
y: initialMoveY,
duration: 0.01,
beforeSetup: function(effect) {
  effect.element.hide().makeClipping().makePositioned();
},
afterFinishInternal: function(effect) {
  new Effect.Parallel(
    [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
      new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
      new Effect.Scale(effect.element, 100, {
        scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
        sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
    ], Object.extend({
         beforeSetup: function(effect) {
           effect.effects[0].element.setStyle({height: '0px'}).show();
         },
         afterFinishInternal: function(effect) {
           effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
         }
       }, options)
  );
}

【问题讨论】：

标签： javascript jquery ajax jquery-animate effects

【解决方案1】：

您可以在此处找到整页幻灯片的工作演示：http://acarna.com/full-page-slide.php

查看源代码和 CSS，因为两者都是此工作所必需的。需要注意的主要关键是...

您需要一个包含 2 个（或更多）屏幕大小页面的容器（我的演示中的#wrapper）
此容器需要将其溢出属性设置为隐藏
每次运行动画时都必须检测屏幕高度（以防窗口大小发生变化）

【讨论】：

这个版本更简单，它不像tumblr的，因为这个幻灯片是在一个页面内执行的，不需要改变url。当滑动执行时，您可以看到 tumblr 的 url 从 /login 变为 /register，这就是重点。
@LotusH 我明白你的意思 - 在单击“登录”链接（例如）时，页面不会像 HTML 页面正常加载那样加载。但是 Ajax 也没有引入内容。您是否按照上述建议检查了 Tumbler 的来源？你会发现他们正在使用 Prototype，有一组非常有趣的 body 标签参数，以及一个看起来很可疑的登录链接。正文标签和登录链接中的参数让我想起了 jQuery Mobile 处理页面的方式，我怀疑是你所追求的效果的关键。
非常感谢。我会尝试这两个建议。

【解决方案2】：

您是否查看过他们在页面中使用的脚本和 css？只需检查一下，您就会知道如何做。

【讨论】：

您可以在firefox中使用firebug插件查看所有脚本和代码。

【解决方案3】：

我也在自己的网站上制作了这种效果。我不知道 tumblr 是怎么做到的，但我已经想出了自己的方法（以 tumblr 的效果为例）：

步骤 1. 在重定向到新网址之前，将当前页面的底部向上滑动
步骤 2. 当新的 url document.ready 时向下滑动顶部

几年后更新：

由于我刚刚获得了新的投票，我发现这个旧答案现在有点过时了。

使用现代javascript，您只需要使用history.pushstate，所有效果都在一页中执行。用js改变页面内容后，可以使用pushstate来改变url，就像是带特效导航一样。

要了解更多关于 pushstate 的信息，请参考https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

【讨论】：

有趣。感谢您的建议。