如何使用 jQuery 為不同高度的網站建立響應式等級頁面滑動？

水平響應式頁面滑動

要設計與提供的圖像類似的響應式頁面導航，請考慮以下jQuery 解決方案：

• 計算尺寸：決定投影片數量，設定包裝寬度，並相應地設定每張投影片的寬度。
• 幻燈片動畫：綁定導覽連結的點擊事件，使包裝器的左邊距具有動畫效果以顯示相應的幻燈片。
• 活動連結： 切換點擊連結的「選定」類別以突出顯示活動頁面。

此方法可確保導航適應螢幕尺寸並處理不同高度的頁面，從而消除間隙。此外，它利用單一選單來最小化標記並支援動態數量的幻燈片。

<code class="js">$(document).ready(function () {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.wrapper').width(wrapperWidth + '%');
  $('.page').width(slideWidth + '%');

  $('a.scrollitem').click(function () {
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
      margin = slideNumber * -100 + '%';

    $('.wrapper').animate({
      marginLeft: margin
    }, 1000);
    return false;
  });
});</code>

<code class="css">html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.wrapper {
  height: 100%;
  background: #263729;
}

.page {
  float: left;
  background: #992213;
  min-height: 100%;
  padding-top: 30px;
}

#page-1 {
  background: #0C717A;
}

#page-2 {
  background: #009900;
}

#page-3 {
  background: #0000FF;
}

a {
  color: #FFF;
}

a.selected {
  color: red;
}

.simulate {
  height: 2000px;
}</code>

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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 id="page">page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3 id="page">page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3 id="page">page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div></code>

以上是如何使用 jQuery 為不同高度的網站建立響應式等級頁面滑動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！