jquery implémente scrolling_jquery en plein écran

Dans de nombreux cas, nous avons besoin d'un défilement de la page en plein écran, notamment sur les appareils mobiles. Aujourd'hui, je vais présenter brièvement la connaissance du défilement plein écran.

1. Le principe du défilement plein écran
1.js obtient dynamiquement la hauteur de l'écran.

Obtenez la hauteur de l'écran et définissez la hauteur de chaque écran.

2. Écoutez les événements de la molette de la souris.

Écoutez l'événement mousewheel et déterminez la direction de la molette pour faire défiler vers le haut ou vers le bas un écran.

2. Introduction aux pages complètes du plug-in jQuery
fullPage.js est un plug-in basé sur jQuery. Il permet de créer facilement et commodément un site Web en plein écran. Les principales fonctions sont :

• Supporte le défilement de la souris
• Prend en charge le contrôle avant, arrière et clavier
• Fonctions de rappel multiples
• Prend en charge les événements tactiles sur les téléphones mobiles et les tablettes
• Supporte l'animation CSS3
• Prise en charge de la mise à l'échelle de la fenêtre
• Ajuster automatiquement lorsque la fenêtre est agrandie
• Peut définir la largeur de défilement, la couleur d'arrière-plan, la vitesse de défilement, les options de boucle, les rappels, l'alignement du texte, etc.

Comment utiliser

1. Importer des fichiers

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2.HTML

<div id="dowebok">
  <div class="section">
    <h3>第一屏</h3>
  </div>
  <div class="section">
    <h3>第二屏</h3>
  </div>
  <div class="section">
    <h3>第三屏</h3>
  </div>
  <div class="section">
    <h3>第四屏</h3>
  </div>
</div>

Chaque section représente un écran, et le "premier écran" est affiché par défaut. Si vous souhaitez préciser "l'écran" affiché lors du chargement de la page, vous pouvez ajouter class="active" à la section correspondante, comme par exemple. :

<div class="section active">第三屏</div>

En même temps, vous pouvez ajouter une diapositive (glisser vers la gauche et la droite) à l'intérieur de la section, telle que :

<div id="fullpages">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">
    <div class="slide">第三屏的第一屏</div>
    <div class="slide">第三屏的第二屏</div>
    <div class="slide">第三屏的第三屏</div>
    <div class="slide">第三屏的第四屏</div>
  </div>
  <div class="section">第四屏</div>
</div>

3.JavaScript

$(function(){
  $('#fullpages').fullpage();
});

De nombreuses configurations peuvent être effectuées :

$(document).ready(function() {
  $('#fullpages').fullpage({
    //Navigation
    menu: '#menu',
    lockAnchors: false,
    anchors:['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',

    //Scrolling
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 1000,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: false,
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,

    //Accessibility
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    //Design
    controlArrows: true,
    verticalCentered: true,
    resize : false,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,

    //Custom selectors
    sectionSelector: '.section',
    slideSelector: '.slide',

    //events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    afterResize: function(){},
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
  });
});

3. Défilement plein écran manuscrit
Ici, nous introduisons principalement la surveillance des événements de la molette de la souris et le défilement.

En raison de la compatibilité des événements mousewheel, le plug-in jquery-mousewheel est cité pour écouter les événements wheel.

La direction et la vitesse de la molette de la souris peuvent être obtenues via le paramètre delta (l'ancienne version doit passer le paramètre delta, la nouvelle version n'en a pas besoin, utilisez event pour l'obtenir directement). Si la valeur de delta est négative, la molette de défilement défile vers le bas, et si elle est positive, elle défile vers le haut.

// using on
$('#my_elem').on('mousewheel', function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

Vous pouvez utiliser des pages complètes pour obtenir un défilement plein écran (haut, bas, gauche et droite) selon vos besoins, ou vous pouvez utiliser jquery-mousewheel pour personnaliser le défilement plein écran à différentes hauteurs.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.