jQuery と CSS を使用してレスポンシブな水平ページ スライディング システムを作成する方法

Patricia Arquette
リリース: 2024-10-30 16:19:26
オリジナル
340 人が閲覧しました

How to Create a Responsive Horizontal Page Sliding System with jQuery and 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!