如何滑动整个网页

How to slide entire webpage?

本文关键字：网页 何滑动      更新时间：2023-09-26

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

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

如何创建此幻灯片效果？

PS：我不要求为我提供工作代码，只是提供指南和建议。

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)
  );
}
您可以

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

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

  • 您需要一个容器，其中保存 2(或更多(屏幕大小的页面(在我的演示中 #wrapper(
  • 此容器需要将其溢出属性设置为隐藏
  • 每次运行动画时都必须检测屏幕高度(如果窗口大小已更改(

您是否查看了他们在页面中使用的脚本和 css？只需检查一下，您将获得如何做到这一点的线索。

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

第 1 步。在重定向到新 URL 之前，请向上滑动当前页面
的底部第 2 步。当新的 URL 文档.ready 时向下滑动顶部

多年后更新：

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

使用

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

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

相关文章：