滑動網頁轉換（jQuery的）

雖然有在這個網站類似的問題，不似乎相當回答我的問題...滑動網頁轉換（jQuery的）

我有一個5靜態頁面的網站，它看起來像一個髮廊內。我希望每個頁面過渡看起來像用戶滑過（環顧四周）沙龍。這意味着內容（.content div）需要滑出，然後下一頁滑入。如果可能的話，最好能夠向鏈接添加不同的類，從而改變頁面和新頁面以何種方式滑出/放入（即從右到左或從左到右）。應該注意的是，導航欄，徽標和頁腳不會滑動，因爲它們位於每個頁面的相同位置。

我設法讓與jQuery的淡入淡出效果：

$(".content").css("display", "none"); 
$(".content").fadeIn(2000); 
$("a.transition").click(function(event) { 
    event.preventDefault(); 
    linkLocation = this.href; 
    $(".content").fadeOut(1000, redirectPage); 
}); 
function redirectPage() { 
    window.location = linkLocation; 
}

然而，這在現實中是很笨重，而且我想能夠滑入類似jQuery的寬鬆的方式頁面。我不希望有一個單頁網站的搜索引擎優化的原因。我不確定ajax是否是答案，但從來沒有探索過，所以沒有使用它的經驗。

感謝，

傑米

來源

2011-05-29 Jamie

「緩動」不是過渡類型。它定義了一個動畫參數如何在整個動畫期間發生變化。有不同類型的緩動，導致看起來不同的動畫。儘管如此，它並沒有爲任何「本身」創作任何動畫。如果您不想將所有子頁面包含到一個頁面中，則必須使用AJAX來獲取每個子頁面的內容，或者爲每個頁面加載添加一個「滑入」效果，並用「滑出」每一頁都卸載。我的建議是讓你的網站保持原樣，並使用JS來改變行爲（如果可用），使用AJAX加載子頁面。 – polarblau 2011-05-29 08:54:41

您可以使用jQuery的全景插件： Plugin 1 Plugin 2 Plugin 3 而且你還可以檢查： This post on SO

來源

2011-05-29 09:51:52

我喜歡這個插件，但是當點擊一個鏈接時，問題就出現在html頁面之間;並且頁面的那些部分與頁面的中心對齊。 – Jamie 2011-05-29 10:21:43

我不明白爲什麼無法將所有內容加載到一起，並根據需要隱藏/顯示它們。

考慮搜索引擎優化，如果搜索引擎機器人忽略不可見的內容。我不認爲使用Javascript加載新頁面會使它更好，我不確定，請糾正我，如果我錯了。

爲了使動畫平滑，我認爲你必須預加載內容。無論你如何優化你的頁面，加載它們仍然需要時間，它肯定比你的動畫持續時間還要長，並且還取決於用戶的網絡/設備/位置......

來源

2015-02-12 12:02:47 cn123h

滑動網頁轉換（jQuery的）

回答

相關問題