如何使用 jQuery 和 CSS 建立響應式水平頁面滑動系統？

響應式水平頁滑動

問題

設計響應式水平導航系統面臨幾個挑戰：

• 維護頁面視窗內的可見性
• 防止頁面之間出現間隙或重疊
• 允許頁面超出100% 高度，並具有滾動條可見性
• 確保與Internet Explorer 9 或更高版本的相容性

解決方案

此解決方案採用jQuery 並包含以下主要功能：

1. 響應式大小調整： 腳本計算總寬度基於頁數的包裝器，確保響應式縮放。
2. 平滑過渡：點擊導航連結可以平滑地為包裝器的左邊距設定動畫，在頁面之間過渡而不會突然跳轉。
3. 動態高度處理：頁可以延伸超過 100% 高度，必要時會出現捲軸，消除不需要的間隙。
4. 活動連結指示：所選導航連結突出顯示以指示目前頁面位置。
5. IE 相容性：程式碼與 Internet Explorer 9 及更高版本相容。

程式碼實作

<code class="javascript">$(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>

CSS

<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>

結論

此程式碼片段為響應式水平頁面導航提供了全面的解決方案，有效地滿足了規定的要求。它的靈活性允許動態導航選單並適應帶有捲軸的長頁面。此外，它與 Internet Explorer 9 的兼容性確保了與多種瀏覽器的兼容性。

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