如何滑动整个网页？

注销并尝试单击按钮“登录”，“注册”，“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) 
); 
}

来源

2011-12-28 BadUX

你看看脚本和他们在他们的网页中使用的CSS？只是检查一下你会得到线索如何做到这一点。

来源

2011-12-28 05:58:28

你可以使用在Firefox插件萤火查看所有的脚本和代码检测屏幕的高度。 – 2011-12-28 06:58:22

我在我自己的网站上也做了这个效果。我不知道tumblr如何做到这一点，但我已经想出了我自己的方式来做到这一点（以tumblr的效果为例）：

第1步。在重定向到一个新的url之前，将底部向上滑动当前
页步骤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

来源

2011-12-28 06:09:32 LotusH

有趣。谢谢你的建议。 – BadUX 2011-12-28 06:17:56

你会发现一个整版的幻灯片这里的工作演示：http://acarna.com/full-page-slide.php

查看源和CSS因为二者都是requird对于这工作。主键需要注意的是...

您需要在其中2个（或以上）的屏幕大小的页面保持容器（#wrapper指定在我的演示）
这个容器都需要有overflow属性设置为隐藏
必须（窗口大小发生了变化的情况下），你运行动画每次

来源

2011-12-28 06:55:09 user8109

这个版本更容易，它不像tumblr的，因为这张幻灯片是在没有更改url的页面内执行的。滑动执行时，您可以看到tumblr的网址从/登录到/注册，这就是要点。 – LotusH 2011-12-28 07:16:59

@LotusH我明白你的意思 - 点击“登录”链接（例如），页面不加载HTML页面正常加载的方式。但是，这些内容也没有被Ajax所吸引。您是否按照上面的建议检查了滚揉机的来源？你会发现他们正在使用Prototype，有一组非常有趣的身体标签参数，以及一个可疑的登录链接。 body标签和登录链接中的参数让我想起了jQuery Mobile处理页面的方式，我怀疑这是您所追求效果的关键。 – user8109 2011-12-28 07:50:08

非常感谢。我会尝试这两种建议。 – BadUX 2011-12-28 12:58:58

如何滑动整个网页？

回答

相关问题