Wie erstelle ich mit jQuery und CSS ein responsives horizontales Seitenschiebesystem?

Responsive horizontale Seitenverschiebung

Problem

Das Entwerfen eines reaktionsfähigen horizontalen Navigationssystems bringt mehrere Herausforderungen mit sich:

• Pflege der Seite Sichtbarkeit innerhalb des Ansichtsfensters
• Verhinderung von Lücken oder Überlappungen zwischen Seiten
• Ermöglicht Seiten, die über 100 % der Höhe hinausragen, mit Sichtbarkeit der Bildlaufleiste
• Gewährleistung der Kompatibilität mit Internet Explorer 9 oder höher

Lösung

Diese Lösung verwendet jQuery und umfasst die folgenden Hauptfunktionen:

1. Responsive Sizing: Das Skript berechnet die Gesamtbreite des Wrappers basierend auf der Anzahl der Seiten, wodurch eine reaktionsfähige Skalierung gewährleistet wird.
2. Glatter Übergang: Durch Klicken auf Navigationslinks wird der linke Rand des Wrappers sanft animiert, sodass der Übergang zwischen den Seiten ohne abrupte Sprünge erfolgt.
3. Dynamische Höhenverwaltung:Seiten können über 100 % Höhe hinausgehen, und bei Bedarf wird eine Bildlaufleiste angezeigt, um unerwünschte Lücken zu beseitigen.
4. Anzeige aktiver Links: Die ausgewählte Navigation Der Link wird hervorgehoben, um die aktuelle Seitenposition anzuzeigen.
5. IE-Kompatibilität: Der Code ist mit Internet Explorer 9 und höher kompatibel.

Code-Implementierung

<code class="javascript">$(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>

CSS

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

Fazit

Dieses Code-Snippet bietet eine umfassende Lösung für eine responsive horizontale Seitennavigation und erfüllt effizient die genannten Anforderungen. Seine Flexibilität ermöglicht dynamische Navigationsmenüs und die Anpassung langer Seiten mit Bildlaufleisten. Darüber hinaus gewährleistet die Kompatibilität mit Internet Explorer 9 die Kompatibilität mit einer Vielzahl von Browsern.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit jQuery und CSS ein responsives horizontales Seitenschiebesystem?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!