So erstellen Sie ein Schaufenster mit JQuery

Dieses Tutorial zeigt, wie ein JQuery-angetriebenes Schaufenster erstellt wird, um Portfolio-Ergänzungen oder neue Produkte hervorzuheben. Das Showcase verwendet Animation, um auf wichtige Informationen aufmerksam zu machen. Wir werden die HTML -Struktur, das CSS -Styling und den JQuery -Code benötigen.

Schlüsselkonzepte:

• Nutzung von JQuery für die Showcase -Animation, Verbesserung der Präsentation neuer Portfolio -Artikel oder -Produkte.
• Strukturieren von HTML mit einem Hauptansichtsfenster div, das verschachtelte Divs für Abschnitte und Etiketten enthält, um eine effiziente Organisation für die effiziente Inhaltsorganisation für reibungslose Scrollen zu gewährleisten.
• Verwenden von CSS, um das Layout und die Sichtbarkeit des Showcase zu verwalten und Eigenschaften wie overflow, width, height und position für eine genaue Kontrolle im Ansichtsfenster zu verwalten.
• Implementieren von JQuery -Warteschlangenfunktionen, um Animationssequenzen zu orchestrieren: Beschriftungen ausblenden, das Ansichtsfenster und die Beschriftungen tauchen während der Navigation nahtlos wieder auf.
• Binding JQuery -Ereignis -Handler, um auf Benutzerinteraktionen (Schaltflächenklicks) zum Navigieren durch Showcase -Abschnitte zu reagieren.

HTML -Struktur:

Der viewport div wirkt als Container und kontrolliert das, was sichtbar ist. Verschachtelte Divs (sections und labels) halten den Inhalt und die Beschriftungen, die auf Scroll erscheinen. Das scrollable div bezieht diese für eine leichtere Scroll -Verwaltung. Schließlich bieten Schaltflächen Navigation.

<div id="viewport">
  <div id="scrollable">
    <div id="sections">
      <div id="section1" class="section"><h1>Uluru</h1></div>
      <div id="section2" class="section"><h1>The Eiffel Tower</h1></div>
      <div id="section3" class="section"><h1>Empire State Building</h1></div>
      <div id="section4" class="section"><h1>The Great Wall of China</h1></div>
    </div>
    <div id="labels">
      <div class="label"><p>Also known as Ayre's rock</p></div>
      <div class="label"><p>In the world's most romantic city</p></div>
      <div class="label"><p>Site of the last hour of King Kong's life</p></div>
      <div class="label"><p>This can be seen from space</p></div>
    </div>
  </div>
</div>
<div id="menu">
  <div id="scroll1" class="button"></div>
  <div id="scroll2" class="button"></div>
  <div id="scroll3" class="button"></div>
  <div id="scroll4" class="button"></div>
</div>

CSS -Styling:

Das CSS definiert die Ansichtsfenster, verhindert den Inhaltsüberlauf und stilft die Abschnitte und Etiketten. Hintergrundbilder werden zu den Abschnitten hinzugefügt.

#viewport { overflow: hidden; border: 5px solid; height: 300px; width: 600px; }
#sections { width: 2400px; height: 300px; }
#labels { position: relative; width: 2400px; height: 100px; bottom: 100px; }
.section { float: left; padding: 10px; width: 580px; height: 280px; }
.label { float: left; padding: 10px; height: 80px; width: 580px; background-color: #777; color: white; }
/* Background images for sections (replace with your image URLs) */
#section1 { background-image: url('../image/uluru.jpg'); }
#section2 { background-image: url('../image/eiffeltower.jpg'); }
#section3 { background-image: url('../image/empirestate.jpg'); }
#section4 { background-image: url('../image/greatwall.jpg'); }
.button { height: 30px; width: 30px; background-color: #777; float: left; margin: 5px; }

jQuery Animation und Ereignishandhabung:

Der JQuery -Code verwaltet die Animationssequenzen (Beschriftung ausblenden, scrollen, beschriften) mit der Funktion queue. Event -Handler sind für die Navigation an Schaltflächen gebunden. Opazitätseffekte werden für Etiketten zum Schwebedruck hinzugefügt.

var currentPage = 1;

function navigate(position, page) {
  if (page != currentPage) {
    currentPage = page;
    $('.label').unbind('mouseover', fadeIn).unbind('mouseout', fadeOut);
    $('#scrollable').clearQueue()
      .queue(hideLabel)
      .queue(scroll(position))
      .queue(showLabel);
  }
}

function hideLabel() {
  $('#labels').animate({ bottom: '0px' }, 250, null, function() { $('#scrollable').dequeue(); });
}

function scroll(position) {
  position = position + "px";
  $('#scrollable').animate({ left: position }, 500, null, function() { $('#scrollable').dequeue(); });
}

function showLabel() {
  $('#labels').animate({ bottom: '100px' }, 250, function() {
    $('.label').bind('mouseover', fadeIn).bind('mouseout', fadeOut);
  });
}

function fadeIn() { $('#labels').stop().fadeTo(250, 1); }
function fadeOut() { $('#labels').stop().fadeTo(250, 0.7); }

$(document).ready(function() {
  $('#scroll1').click(function() { navigate(0, 1); });
  $('#scroll2').click(function() { navigate('-600', 2); });
  $('#scroll3').click(function() { navigate('-1200', 3); });
  $('#scroll4').click(function() { navigate('-1800', 4); });
  $('.label').bind('mouseover', fadeIn).bind('mouseout', fadeOut);
  $('#labels').css("opacity", "0.7");
});

Denken Sie daran, Platzhalter -Bild -URLs durch Ihre tatsächlichen Bildwege zu ersetzen. Dieser umfassende Leitfaden bietet eine robuste Grundlage, um ein dynamisches und ansprechendes Schaufenster mit JQuery zu erstellen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Schaufenster mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!