Comment puis-je créer un glissement de page horizontal réactif à l'aide de jQuery pour un site Web avec différentes hauteurs ?-tutoriel CSS-php.cn

Comment puis-je créer un glissement de page horizontal réactif à l'aide de jQuery pour un site Web avec différentes hauteurs ?

DDD

Libérer： 2024-10-29 13:10:30

original

878 Les gens l'ont consulté

How can I create responsive horizontal page sliding using jQuery for a website with varying heights?

Glissement de page réactif horizontal

Pour concevoir une navigation de page réactive similaire à l'image fournie, envisagez la solution jQuery suivante :

Calculer les dimensions : Déterminez le nombre de diapositives, définissez la largeur du wrapper et définissez la largeur de chaque diapositive en conséquence.
Animation des diapositives : Lier un événement de clic sur les liens de navigation qui anime la marge gauche du wrapper pour révéler la diapositive correspondante.
Lien actif : Basculez la classe « sélectionné » pour le lien cliqué afin de mettre en surbrillance la page active.

Cette approche garantit que la navigation s'adapte à la taille de l'écran et gère des pages de hauteurs variables, éliminant ainsi les espaces. De plus, il utilise une seule occurrence de menu pour minimiser le balisage et prend en charge un nombre dynamique de diapositives.

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!