Bagaimanakah saya boleh membuat gelongsor halaman mendatar responsif menggunakan jQuery untuk tapak web dengan ketinggian yang berbeza-beza?

Gelongsor Halaman Responsif Mendatar

Untuk mereka bentuk navigasi halaman responsif serupa dengan imej yang disediakan, pertimbangkan penyelesaian jQuery berikut:

• Kira Dimensi: Tentukan bilangan slaid, tetapkan lebar pembalut dan tetapkan lebar setiap slaid dengan sewajarnya.
• Animasi Slaid: Ikat acara klik ke pautan navigasi yang menghidupkan margin kiri pembalut untuk mendedahkan slaid yang sepadan.
• Pautan Aktif: Togol kelas "dipilih" untuk pautan yang diklik untuk menyerlahkan halaman aktif.

Pendekatan ini memastikan bahawa navigasi menyesuaikan diri dengan saiz skrin dan mengendalikan halaman dengan ketinggian yang berbeza-beza, menghapuskan jurang. Selain itu, ia menggunakan satu kejadian menu untuk meminimumkan penanda dan menyokong bilangan slaid yang dinamik.

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

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat gelongsor halaman mendatar responsif menggunakan jQuery untuk tapak web dengan ketinggian yang berbeza-beza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!