Comment créer un système de glissement de page horizontal réactif avec jQuery et CSS ?

Flux de page horizontal réactif

Problème

La conception d'un système de navigation horizontale réactif présente plusieurs défis :

• Maintenir la page visibilité dans la fenêtre d'affichage
• Prévenir les espaces ou les chevauchements entre les pages
• Autoriser les pages qui s'étendent au-delà de 100 % de la hauteur, avec visibilité de la barre de défilement
• Assurer la compatibilité avec Internet Explorer 9 ou supérieur

Solution

Cette solution utilise jQuery et comprend les fonctionnalités clés suivantes :

1. Responsive Sizing : Le script calcule la largeur totale du wrapper en fonction du nombre de pages, garantissant une mise à l'échelle réactive.
2. Transition fluide : Cliquer sur les liens de navigation anime en douceur la marge gauche du wrapper, en passant d'une page à l'autre sans sauts brusques.
3. Gestion dynamique de la hauteur : Les pages peuvent s'étendre au-delà de 100 % de la hauteur et une barre de défilement apparaît si nécessaire, éliminant les espaces indésirables.
4. Indication de lien actif : La navigation sélectionnée le lien est mis en surbrillance pour indiquer la position actuelle de la page.
5. Compatibilité IE : Le code est compatible avec Internet Explorer 9 et supérieur.

Implémentation du code

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

Conclusion

Cet extrait de code fournit une solution complète pour une navigation horizontale réactive dans les pages, répondant efficacement aux exigences énoncées. Sa flexibilité permet des menus de navigation dynamiques et l'hébergement de longues pages avec des barres de défilement. De plus, sa compatibilité avec Internet Explorer 9 assure une compatibilité avec une large gamme de navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!