Wie kann ich mit jQuery ein responsives horizontales Seitengleiten für eine Website mit unterschiedlichen Höhen erstellen?

Horizontal Responsive Page Sliding

Um eine responsive Seitennavigation ähnlich dem bereitgestellten Bild zu entwerfen, ziehen Sie die folgende jQuery-Lösung in Betracht:

• Abmessungen berechnen:Bestimmen Sie die Anzahl der Folien, legen Sie die Wrapper-Breite fest und stellen Sie die Breite jeder Folie entsprechend ein.
• Folienanimation:Binden ein Klickereignis für Navigationslinks, das den linken Rand des Wrappers animiert, um die entsprechende Folie anzuzeigen.
• Aktiver Link: Schalten Sie die „ausgewählte“ Klasse für den angeklickten Link um, um die aktive Seite hervorzuheben.

Dieser Ansatz stellt sicher, dass sich die Navigation an die Bildschirmgröße anpasst und Seiten mit unterschiedlichen Höhen verarbeitet, wodurch Lücken vermieden werden. Darüber hinaus nutzt es ein einziges Menü, um Markierungen zu minimieren, und unterstützt eine dynamische Anzahl von Folien.

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

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

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
  </nav>
  <div id="page-1" class="page">
    <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div></code>

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery ein responsives horizontales Seitengleiten für eine Website mit unterschiedlichen Höhen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!