2013-03-11 85 views
1

我很想知道是用來產生作用,如本網站的模板:http://www.templatemonster.com/demo/43491.html建立一個「單頁」網站與網頁之間的動畫

我想有一個菜單和背景,而一旦我點擊菜單鏈接,它觸發新頁面滑入視圖,而不會被重定向到一個新頁面,導致瀏覽器重新加載新頁面等等。平滑和美觀。

我不是在尋找代碼(除了要使用的函數(如果JQuery)),我應該尋找什麼樣的效果才能使它成爲可能?

只需指向我朝着正確的方向:)

+1

爲什麼不直接使用該頁面的源代碼作爲例子?在這裏你可以看到。 – Brad 2013-03-11 00:07:49

+0

謝謝你的標題編輯,我不想從他們完全複製,並有不止一種方法皮膚貓。我只想要每個人都輸入。有些人在某些領域更有經驗,可能會說一件事,而其他人可能會說另一件事。也許這個模板的代碼設置很差,可能會更有效率。很多原因,我不使用他們的源代碼作爲例子:) – Jayson 2013-03-11 00:13:36

回答

-1

現在可以有噸的辦法..最簡單的方式(但它沒有太多的維護方式)

是您網站的所有內容一個頁面,敷您在一個div考慮一個頁面像這樣

<div class="home-page">content of home page goes here </div> 
<div class="contact-us-page">content of contact us page goes here </div> 

etc... 

,並與jQuery每個部分隱藏所有除主頁

$(function(){ 
    $('.contact-us-page').hide(); 
    $('.other-page').hide(); 
}) 

當鏈接到其他網頁上的用戶點擊我們說的與我們聯繫頁面您可以隱藏父及滑動與我們聯繫頁面,而不是

$('.contact-us-link').click(function(){ 
    $('.home-page').hide(1000); 
    $('.contact-us-page').show(1000); 
}) 

和多數民衆贊成:)

下今年秋天是不會有路由..

所以要解決這個問題,你必須使用像Backbone.js的 這需要一段時間才能知道好...

這僅僅是如何工作的一個快速的想法..

+0

這一點的缺點,如你所說:不可維護,無路由。你沒有提到的缺點:不容易訪問,沒有後備,而不是SEO。路由不需要backbone.js。現在用HTML5有一些漂亮的解決方案! – Sunyatasattva 2013-03-11 00:54:49

+0

@Sunyatasattva你是什麼意思「有一些漂亮的解決方案?」你會介意以html5來完成這個任務的例子嗎? :) – Jayson 2013-03-11 01:12:54

+0

我在我的回答結束時做了。 – Sunyatasattva 2013-03-11 01:13:54

0

有很多方法可以實現你的願望,但是這是我對如何概念去了解它建議:

  1. 動畫內容通過動畫內容容器的position,這應該給你的頁面提供一個很好的流暢感覺。 The jQuery documentation應該很清楚。請記住,您要攔截錨點的正常行爲,因此要麼preventDefault()要麼是return false,要麼兩者都是。

  2. 使用獲取您的內容。您可以使用您放入鏈接的href屬性來獲取正確的內容。然後使用.on()方法將事件綁定到該元素。你離開href的原因是要有一個優雅的回退:如果代碼出現問題,應該禁用JavaScript或者只是在非javascript友好的瀏覽器上導航,他仍然可以訪問你的內容。

這些是實現您所需要的兩個基本步驟。如果要微調您的網站多一點,儘量去想那些事情,以及:

  1. 讓您的網站被謹慎使用裝載.gif S的外觀更加敏感

  2. 不雙服務內容:檢查用戶是否點擊當前顯示頁面的鏈接並且不再次獲取內容;除了看你的用戶愚蠢,它會造成無用的服務器負載(可能微不足道,但仍然)。不過,一定要考慮你的用戶!告訴他,通過巧妙使用UI來禁用該鏈接。

  3. 操作瀏覽器歷史記錄:使用history API。您的網站將更容易訪問,更方便用戶,更適合搜索引擎優化,並且看起來也更加先進。

+0

我希望我更高級的知道你是什麼意思,但我會盡力回過頭來看看你的答案,一旦我更好地理解你的意思。儘管謝謝你對這個問題的貢獻! – Jayson 2013-03-11 01:15:18

+0

什麼是你需要更多的幫助?或者有些不清楚的東西? – Sunyatasattva 2013-03-11 01:19:28

+0

我只是不明白所有的JQuery,但我一直在線上課,雖然這有助於我理解語法和所有文檔。例如,我不知道「攔截錨的正常行爲」意味着什麼,你現在沒有什麼可以幫忙的。我只需要繼續學習(我一直在學習JQuery只有3天幾個小時) – Jayson 2013-03-11 03:28:04