javascript - 如何滑动整个网页？

Question

例如 - http://www.tumblr.com

注销并尝试单击按钮“登录”、“注册”、“30 个你会喜欢 Tumblr 的理由”(特别有趣)。

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

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)
  );
}

Answer 1

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

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

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