JQuery-Vollbild-Scrollen ohne Plugins-Front-End-Fragen und Antworten-php.cn

JQuery-Vollbild-Scrollen ohne Plugins

王林

Freigeben： 2023-05-18 20:31:10

Original

444 Leute haben es durchsucht

Mit der kontinuierlichen Weiterentwicklung der Web-Technologie verwenden immer mehr Websites Scrolleffekte im Vollbildmodus, sodass Benutzer mehrere Inhaltsbereiche auf einer Seite durchsuchen können. Es gibt viele Möglichkeiten, diesen Effekt zu erzielen. Die am häufigsten verwendete ist die Verwendung des jQuery-Plug-Ins. Was ich heute jedoch vorstellen möchte, ist, wie man einen Bildlauf im Vollbildmodus ohne Verwendung des jQuery-Plug-Ins erreichen kann.

HTML-Struktur

Wir müssen zunächst die HTML-Struktur unserer Website festlegen. In diesem Beispiel verwenden wir ein Bild als Hintergrund für den ersten Bildschirm und auf dem zweiten Bildschirm wird ein Text angezeigt. Daher sollte unsere HTML-Struktur wie folgt aussehen:

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

Nach dem Login kopieren

Es ist ersichtlich, dass wir die gesamte Seite in zwei Teile unterteilen, jeder Teil ist ein Abschnitt und der Hintergrund des ersten Bildschirms ist ein Abschnitt mit div der Klasse bg-img, während der zweite Bildschirm ein div mit der Klasse .text enthält.

CSS-Stile

Als nächstes müssen wir unserer Seite Stile hinzufügen. Wir müssen die Höhe der Seite auf die Höhe des Browserfensters und die Höhe jedes Abschnitts auf 100 % einstellen. Gleichzeitig müssen wir die Position aller Abschnitte auf absolute Positionierung setzen, damit wir später durch die Seite scrollen können.

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

Nach dem Login kopieren

JavaScript-Code

Jetzt müssen wir unserer Website JavaScript-Code hinzufügen, um das Scrollen der Seite zu ermöglichen. Wir können das Mausrad oder die Auf- und Abwärtspfeile der Tastatur verwenden, um durch die Seite zu scrollen.

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

Nach dem Login kopieren

Wir definieren eine sectionIndex-Variable, um die aktuelle Bildschirmposition für das nachfolgende Scrollen aufzuzeichnen. Wir definieren auch eine section-Variable, um alle Abschnittselemente zu speichern, und die totalSections-Variable wird verwendet, um die Anzahl der Abschnitte aufzuzeichnen.

Als nächstes fügen wir Ereignis-Listener für das Mausrad und die Auf- und Abwärtspfeile der Tastatur hinzu. Wenn der Benutzer scrollt, erhöhen oder verringern wir sectionIndex und prüfen, ob der Wert von sectionIndex die Gesamtzahl der Bildschirme überschreitet. , um sicherzustellen, dass der Bildschirm, auf dem wir uns befinden, legal ist. Zum Schluss rufen wir die Funktion scrollToSection auf, um zum Zielbildschirm zu springen.

scrollToSection-Funktion verwendet die animate-Methode von jQuery, um reibungslos zur Position des angegebenen Abschnitts zu scrollen. Bei Bedarf können wir auch die Scrollzeit ändern.

Ergebnisanzeige

Endlich haben wir erfolgreich einen Vollbild-Scrolleffekt implementiert, der keine Verwendung von jQuery-Plug-Ins erfordert. Der Effekt ist wie folgt:

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie Um den Vollbild-Bildlaufeffekt zu erzielen, werden reines JavaScript und jQuery verwendet, und der Implementierungseffekt wird ebenfalls demonstriert. Obwohl das jQuery-Plug-in die Implementierung vereinfachen kann, können wir durch die Verwendung von nativem JavaScript die Arbeitsprinzipien und die Logik hinter dem Code besser verstehen und den Scroll-Effekt flexibler anpassen.

Das obige ist der detaillierte Inhalt vonJQuery-Vollbild-Scrollen ohne Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!