2012-11-24 38 views
-3

如果你去這個網站瀏覽:http://alexdunphy.github.com/refineslide/#installation這個效果是如何實現的? HTML/CSS/jQuery的

,然後點擊菜單按鈕「安裝」,「調整」,「常見問題解答」,「關於」等等......你會發現有是每個頁面之間的一個很好的轉換,沒有整個頁面重新加載。

我剛開始網絡開發,我想嘗試實現類似的效果。

這裏有一個關於他是如何做我的猜測:

  1. 的iFrame與內容,按鈕會觸發要加載每個iFrame的。每個iframe的頂級<div>在一些-webkit--moz-動畫。

  2. 的全部內容是一個div,每個按鈕簡單淡出先前DIV出來,消失在未來DIV與一些CSS動畫。

我會試試這兩個,除非你們知道它是如何完成的。

在1和2中哪一個更吸引人?

回答

1

它採用了僞選擇稱爲目標,鏈接追加#pagename的網址,以及適當的動畫發生在那裏。

的HTML可能看起來像:

<p id='pagename'>This is some text</p> 

的鏈接如下所示:

<a href='#pagename'>This link goes to pagename</a> 

然後在CSS,你可以定義:

#pagename:target { 
    font-weight: bold; 
} 

這將使點擊鏈接時,#pagename內的文字將變爲粗體。從這裏你可以擴展它包含動畫,就像給所有的div不透明度0和位置左:50px;

然後每當一個div的目標,你的動畫不透明度爲1,左側爲0px

編輯:下面是一個簡單的例子,我颳起了其模仿你要去的確切效果:http://jcolicchio.latestdot.net/test_target.html#page1

+0

感謝哥們。管理使用該方法來理清一些效果:) –

0

如果您使用螢火蟲檢查網頁,可以看到jQuery文件內部(或至少是其中的一部分)具有所有魔力。

沒有看到所有的細節,但我想你可以實現純jQuery和CSS這樣的效果。

祝你好運!