我發現這個教程: http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jqueryjQuery:我如何滑動頁面,但只使用一個導航?
而且我喜歡這個網站做了滑動的方式:http://dknewmedia.com
我怎樣做滑動效果像DK的新媒體,但只有一個單一的導航?
我發現這個教程: http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jqueryjQuery:我如何滑動頁面,但只使用一個導航?
而且我喜歡這個網站做了滑動的方式:http://dknewmedia.com
我怎樣做滑動效果像DK的新媒體,但只有一個單一的導航?
您可以將導航元素放置在包含頁面其餘部分的包裝元素之外;絕對定位導航元素並上下移動包裝。
HTML:
<ul id="nav">
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
<div id="wrapper">
<div id="page1">Content for page 1</div>
<div id="page2">Content for page 2</div>
<div id="page3">Content for page 2</div>
</div>
CSS:
#nav { position: absolute; top: 0; right: 50px; z-index: 50; }
#nav > li { float: left; padding: 5px 10px; }
#wrapper { height: 500px; overflow: hidden; position: relative; z-index: 20; }
#wrapper > div { width: 100%; height: 500px; }
JS:
$(function() {
$('#nav a').click(function() {
pageId = $(this).attr('href');
num = $('#nav a').index(this);
$(pageId).parent().animate({scrollTop: (500 * num)}, 'slow');
});
});
您可以在http://jsfiddle.net/L6Q5V/嘗試。您可能需要優化代碼。
我認爲有兩種方法可以實現這一點:1)您可以從動畫區域中排除導航,2)您可以爲導航和其他內容製作兩個單獨的動畫,以便您的導航簡單地關閉屏幕,然後從下面返回。這是想法。