Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-10-30 16:19:26
Original
339 Leute haben es durchsucht

How to Create a Responsive Horizontal Page Sliding System with jQuery and CSS?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!