Bagaimana untuk Mencipta Sistem Gelongsor Halaman Mendatar Responsif dengan jQuery dan CSS?

Gelongsor Halaman Mendatar Responsif

Masalah

Merancang sistem navigasi mendatar responsif memberikan beberapa cabaran:

• Menyelenggara halaman keterlihatan dalam port pandangan
• Menghalang jurang atau pertindihan antara halaman
• Membenarkan halaman yang melebihi ketinggian 100%, dengan keterlihatan bar skrol
• Memastikan keserasian dengan Internet Explorer 9 atau ke atas

Penyelesaian

Penyelesaian ini menggunakan jQuery dan termasuk ciri utama berikut:

1. Saiz Responsif: Skrip mengira jumlah lebar daripada pembalut berdasarkan bilangan halaman, memastikan penskalaan responsif.
2. Peralihan Lancar: Mengklik pautan navigasi dengan lancar menghidupkan jidar kiri pembalut, beralih antara halaman tanpa lompatan mendadak.
3. Pengendalian Ketinggian Dinamik: Halaman boleh melepasi ketinggian 100% dan bar skrol muncul apabila perlu, menghapuskan jurang yang tidak diingini.
4. Petunjuk Pautan Aktif: Navigasi yang dipilih pautan diserlahkan untuk menunjukkan kedudukan halaman semasa.
5. Keserasian IE: Kod ini serasi dengan Internet Explorer 9 dan ke atas.

Pelaksanaan Kod

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

Kesimpulan

Coretan kod ini menyediakan penyelesaian yang komprehensif untuk navigasi halaman mendatar responsif, dengan cekap menangani keperluan yang dinyatakan. Fleksibilitinya membolehkan menu navigasi dinamik dan memuatkan halaman panjang dengan bar skrol. Selain itu, keserasiannya dengan Internet Explorer 9 memastikan keserasian dengan pelbagai pelayar.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sistem Gelongsor Halaman Mendatar Responsif dengan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!