水平レスポンシブ ページ スライド

提供された畫(huà)像と同様のレスポンシブ ページ ナビゲーションを設(shè)計(jì)するには、次の jQuery ソリューションを検討してください。

• サイズの計(jì)算: スライドの數(shù)を決定し、ラッパーの幅を設(shè)定し、それに応じて各スライドの幅を設(shè)定します。
• スライド アニメーション: バインドラッパーの左マージンをアニメーション化して、対応するスライドを表示するナビゲーション リンクへのクリック イベント。
• アクティブ リンク: クリックされたリンクの「選択」クラスを切り替えて、アクティブ ページを強(qiáng)調(diào)表示します。

このアプローチにより、ナビゲーションが畫(huà)面サイズに適応し、さまざまな高さのページを処理して隙間をなくすことができます。さらに、単一のメニューオカレンスを利用してマークアップを最小限に抑え、動(dòng)的な數(shù)のスライドをサポートします。

<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>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div></code>

以上が高さが異なる Web サイトに対して jQuery を使用してレスポンシブな水平ページ スライドを作成するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。