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!