jquery implementiert Vollbild-Scrolling_jquery

In vielen Fällen müssen wir die Seite im Vollbildmodus scrollen, insbesondere auf Mobilgeräten. Heute werde ich kurz das Wissen über das Scrollen im Vollbildmodus vorstellen.

1. Das Prinzip des Vollbild-Scrollens
1.js ermittelt dynamisch die Höhe des Bildschirms.

Ermitteln Sie die Höhe des Bildschirms und legen Sie die Höhe jedes Bildschirms fest.

2. Hören Sie sich Mausrad-Ereignisse an.

Hören Sie sich das Mausrad-Ereignis an und bestimmen Sie die Richtung des Rades, um einen Bildschirm nach oben oder unten zu scrollen.

2. Einführung in jQuery-Plug-in-Ganzseiten
fullPage.js ist ein Plug-in, das auf jQuery basiert. Es kann einfach und bequem eine Vollbild-Website erstellen. Die Hauptfunktionen sind:

• Unterstützt das Scrollen mit der Maus
• Unterstützt Vorwärts-, Rückwärts- und Tastatursteuerung
• Mehrere Rückruffunktionen
• Unterstützen Sie Touch-Ereignisse auf Mobiltelefonen und Tablets
• Unterstützt CSS3-Animation
• Unterstützung der Fensterskalierung
• Automatisch anpassen, wenn das Fenster gezoomt wird
• Kann Bildlaufbreite, Hintergrundfarbe, Bildlaufgeschwindigkeit, Schleifenoptionen, Rückrufe, Textausrichtung usw. festlegen.

Anwendung

1. Dateien importieren

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

Jeder Abschnitt stellt einen Bildschirm dar und der „erste Bildschirm“ wird standardmäßig angezeigt. Wenn Sie den beim Laden der Seite angezeigten „Bildschirm“ angeben möchten, können Sie dem entsprechenden Abschnitt „class="active" hinzufügen, z :

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

Gleichzeitig können Sie innerhalb des Abschnitts eine Folie hinzufügen (nach links und rechts wischen), z. B.:

<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();
});

Viele Konfigurationen können durchgeführt werden:

$(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. Handschriftliches Scrollen im Vollbildmodus
Hier stellen wir hauptsächlich die Überwachung von Mausradereignissen und Scrollen vor.

Aufgrund der Kompatibilität von Mousewheel-Ereignissen wird das jquery-mousewheel-Plug-in zitiert, um auf Wheel-Ereignisse zu warten.

Die Richtung und Geschwindigkeit des Mausrads kann über den Parameter Delta ermittelt werden (die alte Version muss den Delta-Parameter übergeben, die neue Version muss dies nicht tun, verwenden Sie das Ereignis, um ihn direkt abzurufen). Wenn der Wert von Delta negativ ist, scrollt das Scrollrad nach unten, ist er positiv, scrollt es nach oben.

// 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);
});

Sie können Fullpages verwenden, um das Scrollen im Vollbildmodus (nach oben, unten, links und rechts) entsprechend Ihren Anforderungen zu erreichen, oder Sie können jquery-mousewheel verwenden, um das Scrollen im Vollbildmodus in verschiedenen Höhen anzupassen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.