Maison > Article > interface Web > jquery défilement plein écran sans plugins

jquery défilement plein écran sans plugins

王林original: 2023-05-18 20:31:10415parcourir

Avec le développement continu de la technologie Web, de plus en plus de sites Web utilisent des effets de défilement plein écran, permettant aux utilisateurs de parcourir plusieurs zones de contenu sur une seule page. Il existe de nombreuses façons d'obtenir cet effet, parmi lesquelles la plus couramment utilisée consiste à utiliser le plug-in jQuery. Mais ce que je souhaite présenter aujourd'hui, c'est une méthode permettant d'obtenir un défilement plein écran sans utiliser le plug-in jQuery.

Structure HTML

Nous devons d'abord déterminer la structure HTML de notre site Web. Dans cet exemple, nous utiliserons une image comme arrière-plan du premier écran, et le deuxième écran affichera un texte. Par conséquent, notre structure HTML devrait être :

<body>
  <div class="section section-1">
    <div class="bg-img"></div>
  </div>
  <div class="section section-2">
    <div class="text"></div>
  </div>
</body>

Comme vous pouvez le voir, nous divisons la page entière en deux parties, chaque partie est une section, et l'arrière-plan du premier écran est un div avec la classe .bg-img, tandis que le le deuxième écran contient un div avec une classe .text.

Styles CSS

Ensuite, nous devons ajouter des styles à notre page. Nous devons définir la hauteur de la page sur la hauteur de la fenêtre du navigateur et définir la hauteur de chaque section sur 100 %. Dans le même temps, nous devons définir la position de toutes les sections sur un positionnement absolu afin de pouvoir faire défiler la page plus tard.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.section {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.section-1 {
  background-color: #f9f9f9;
}

.bg-img {
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
  background-position: center;
  height: 100%;
}

.section-2 {
  background-color: #fff;
}

Code JavaScript

Maintenant, nous devons ajouter du code JavaScript à notre site Web pour permettre le défilement de la page. Nous pouvons utiliser la molette de la souris ou les flèches haut et bas du clavier pour faire défiler la page.

var sectionIndex = 0;
var sections = $('.section');
var totalSections = sections.length;

$(document).on('mousewheel DOMMouseScroll', function (e) {
  if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
    //向上滚动
    sectionIndex--;
  } else {
    //向下滚动
    sectionIndex++;
  }
  if (sectionIndex < 0) {
    sectionIndex = 0;
  }
  if (sectionIndex > totalSections - 1) {
    sectionIndex = totalSections - 1;
  }
  scrollToSection(sectionIndex);
});

$(document).keydown(function (e) {
  switch (e.which) {
    case 38: //向上箭头
      sectionIndex--;
      break;
    case 40: //向下箭头
      sectionIndex++;
      break;   
    default:
      return; 
  }
  if (sectionIndex < 0) {
    sectionIndex = 0;
  }
  if (sectionIndex > totalSections - 1) {
    sectionIndex = totalSections - 1;
  }
  scrollToSection(sectionIndex);    
});

function scrollToSection(sectionIndex) {
  $('html, body').animate({
    scrollTop: sections.eq(sectionIndex).offset().top
  }, 500);
}

Nous avons défini une variable sectionIndex pour enregistrer la position actuelle de l'écran pour un défilement ultérieur. Nous avons également défini une variable sections pour stocker tous les éléments de section et une variable totalSections pour enregistrer le nombre de sections.

Ensuite, nous ajoutons des écouteurs d'événements pour la molette de la souris et les flèches haut et bas du clavier. Lorsque l'utilisateur fait défiler, nous augmenterons ou diminuerons sectionIndex et vérifierons si la valeur de sectionIndex dépasse le nombre total d'écrans pour nous assurer que nous sommes activés. L'écran est légal. Enfin, nous appelons la fonction scrollToSection pour accéder à l'écran cible. La fonction

scrollToSection utilise la méthode d'animation de jQuery pour faire défiler en douceur jusqu'à la position de la section spécifiée. Nous pouvons également modifier le temps de défilement si besoin.

Affichage des résultats

Enfin, nous avons implémenté avec succès un effet de défilement plein écran qui ne nécessite pas l'utilisation de plug-ins jQuery. L'effet est le suivant :

Résumé

Dans cet article, nous avons présenté comment utiliser JavaScript pur et jQuery pour obtenir l'effet de défilement plein écran, et avons également démontré l'effet de mise en œuvre. Bien que le plug-in jQuery puisse simplifier la mise en œuvre, l'utilisation de JavaScript natif nous permet de mieux comprendre les principes de fonctionnement et la logique derrière le code, et nous permet également de personnaliser l'effet de défilement de manière plus flexible.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quel contenu est important dans jqueryArticle suivant：Quel contenu est important dans jquery

Articles Liés

Voir plus