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 中国語 Web サイトの他の関連記事を参照してください。