Bagaimana untuk melaksanakan navigasi gelongsor halaman mendatar responsif dengan jQuery dan CSS?

Gelongsor Halaman Mendatar Responsif

Untuk mencipta navigasi mendatar responsif serupa dengan yang dalam imej yang anda berikan, anda boleh menggunakan gabungan CSS dan jQuery. Coretan berikut akan mengubah saiz halaman agar sesuai dengan lebar skrin pada mana-mana peranti:

1. Kira bilangan slaid dan laraskan lebar pembalut sewajarnya.


2. Tetapkan lebar setiap slaid berdasarkan bilangan slaid untuk memastikan ia muat secara mendatar.


3. Gunakan jQuery untuk menghidupkan sebelah kiri jidar pembalut untuk mendedahkan slaid yang sepadan apabila item dalam menu diklik.

Penyelesaian ini menawarkan beberapa kelebihan:

1. Ia hanya menggunakan satu tika menu navigasi untuk meminimumkan pertindihan markup.


2. Ia hanya memerlukan jQuery sebagai kebergantungan.


3. Ia berfungsi untuk sebarang bilangan slaid, menjadikannya penyelesaian dinamik.

< p>Untuk mengelakkan bar skrol daripada muncul pada slaid yang mempunyai kandungan yang lebih pendek, tetapkan ketinggian minimum halaman dalam CSS:

<code class="css">.page { min-height: 100%; }</code>

$(document).ready(function() {
// Calculate the number of slides and adjust wrapper width
var slideNum = $('.page').length;
var wrapperWidth = 100 * slideNum;
var slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');

// Click listener for navigation items
$('a.scrollitem').click(function() {
// Remove selected class and add it to the clicked link
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');

//Determine which slide number was clicked and calculate the required margin
var slideNumber = $($this).attr('href').index('.page'),
margin = slideNumber * -100 + '%';

// Animatethe wrapper's left margin to show corresponding slide
$('.wrapper.animate({
marginLeft: margin},
1000);
return false;
});
});

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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 higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan navigasi gelongsor halaman mendatar responsif dengan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!