How to Create a Showcase with jQuery

This tutorial demonstrates how to build a jQuery-powered showcase to highlight portfolio additions or new products. The showcase uses animation to draw attention to key information. We'll cover the HTML structure, CSS styling, and jQuery code required.

Key Concepts:

• Leveraging jQuery for showcase animation, enhancing the presentation of new portfolio items or products.
• Structuring HTML with a main viewport div, containing nested divs for sections and labels, ensuring efficient content organization for smooth scrolling.
• Utilizing CSS to manage the showcase's layout and visibility, employing properties like overflow, width, height, and position for precise control within the viewport.
• Implementing jQuery queuing functions to orchestrate animation sequences: labels hide, the viewport scrolls, and labels reappear seamlessly during navigation.
• Binding jQuery event handlers to respond to user interactions (button clicks) for navigating through showcase sections.

HTML Structure:

The viewport div acts as the container, controlling what's visible. Nested divs (sections and labels) hold the content and labels that appear on scroll. The scrollable div wraps these for easier scrolling management. Finally, buttons provide 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:

The CSS defines the viewport dimensions, prevents content overflow, and styles the sections and labels. Background images are added to the 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 and Event Handling:

The jQuery code manages the animation sequences (hide label, scroll, show label) using the queue function. Event handlers are bound to buttons for navigation. Opacity effects are added for labels on hover.

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

Remember to replace placeholder image URLs with your actual image paths. This comprehensive guide provides a robust foundation for creating a dynamic and engaging showcase using jQuery.

The above is the detailed content of How to Create a Showcase with jQuery. For more information, please follow other related articles on the PHP Chinese website!