如何滑動整個網頁？

註銷並嘗試單擊按鈕「登錄」，「註冊」，「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

如何滑動整個網頁？

回答

相關問題