如何用jQuery和CSS實現響應式水平頁面滑動導航？

響應式水平頁面滑動

要建立類似於您提供的影像中的響應式水平導航，您可以結合使用CSS 和jQuery。以下程式碼片段將調整頁面大小以適合任何裝置上的螢幕寬度：

1. 計算幻燈片數量並調整包裝的寬度


2. 根據投影片的數量設定每張投影片的寬度，以確保它們水平放置。


3. 使用 jQuery 為左側設定動畫點選選單中的項目時，包裝器的邊距會顯示對應的幻燈片。

此解決方案具有以下幾個優點： p>

1. 它僅使用導航選單的一個實例，以最大限度地減少標記重複。


2. 它只需要 jQuery 作為依賴關係。


3. 它適用於任意數量的幻燈片，使其成為一個動態解決方案。

要防止內容較短的幻燈片上出現捲軸，請在CSS 中設定頁面的最小高度：

<code class="css">.page { min-height: 100%; }</code>

$(document).ready(function() {
// Calculate the number of slides and adjust wrapper width
var slideNum = $('.page').length;
var wrapperWidth = 100 * slideNum;
var slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');

// Click listener for navigation items
$('a.scrollitem').click(function() {
// Remove selected class and add it to the clicked link
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');

//Determine which slide number was clicked and calculate the required margin
var slideNumber = $($this).attr('href').index('.page'),
margin = slideNumber * -100 + '%';

// Animatethe wrapper's left margin to show corresponding slide
$('.wrapper.animate({
marginLeft: margin},
1000);
return false;
});
});

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<nav>
<a href="#page-1" class="scrollitem selected">Page 1</a>
<a href="#page-2" class="scrollitem">Page 2</a>
<a href="#page-3" class="scrollitem">Page 3</a>
</nav>
<div id="page-1" class="page">
<h3>Page 1</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

以上是如何用jQuery和CSS實現響應式水平頁面滑動導航？的詳細內容。更多資訊請關注PHP中文網其他相關文章！