Comment créer une vitrine avec jQuery

Ce tutoriel montre comment construire une vitrine alimentée par jQuery pour mettre en évidence des ajouts de portfolio ou de nouveaux produits. La vitrine utilise l'animation pour attirer l'attention sur les informations clés. Nous couvrirons la structure HTML, le style CSS et le code jQuery requis.

Concepts clés:

• Tire en tirant jQUERY pour l'animation de vitrine, améliorant la présentation de nouveaux articles ou produits de portefeuille.
• Structurer HTML avec une fenêtre principale div, contenant des divs imbriqués pour les sections et les étiquettes, assurant une organisation de contenu efficace pour le défilement en douceur.
• en utilisant CSS pour gérer la disposition et la visibilité de la vitrine, en utilisant des propriétés comme overflow, width, height, et position pour un contrôle précis dans la fenêtre.
• Implémentation de fonctions de file d'attente jQuery pour orchestrer les séquences d'animation: les étiquettes se cachent, les parchemins de la fenêtre et les étiquettes réapparaissent parfaitement pendant la navigation.
• Les gestionnaires d'événements JQuery de liaison pour répondre aux interactions utilisateur (clics de bouton) pour naviguer dans les sections de vitrine.

Structure HTML:

le viewport div agit comme le conteneur, contrôlant ce qui est visible. Les divs imbriqués (sections et labels) maintiennent le contenu et les étiquettes qui apparaissent sur défilement. Le scrollable div les enveloppe pour une gestion plus facile de défiler. Enfin, les boutons fournissent une 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>

Style CSS:

Le CSS définit les dimensions de la fenêtre, empêche le débordement de contenu et styles les sections et les étiquettes. Des images d'arrière-plan sont ajoutées aux sections.

#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 et manipulation des événements:

Le code jQuery gère les séquences d'animation (masquer l'étiquette, le défilement, l'étiquette show) en utilisant la fonction queue. Les gestionnaires d'événements sont liés aux boutons de navigation. Des effets d'opacité sont ajoutés pour les étiquettes sur le plan de survol.

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");
});

N'oubliez pas de remplacer les URL de l'image d'espace réservé par vos chemins d'image réels. Ce guide complet fournit une base robuste pour créer une vitrine dynamique et engageante en utilisant jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!