Cara membuat pameran dengan jQuery

Tutorial ini menunjukkan cara membina pameran berkuasa jQuery untuk menyerlahkan penambahan portfolio atau produk baru. Pameran ini menggunakan animasi untuk menarik perhatian kepada maklumat utama. Kami akan meliputi struktur HTML, gaya CSS, dan kod jQuery yang diperlukan.

Konsep Utama:

memanfaatkan jQuery untuk animasi pameran, meningkatkan pembentangan item atau produk portfolio baru.
Penstrukturan HTML dengan Viewport utama
• , yang mengandungi div bersarang untuk bahagian dan label, memastikan organisasi kandungan yang cekap untuk menatal yang lancar. div
menggunakan CSS untuk menguruskan susun atur dan penglihatan pameran, menggunakan sifat seperti
• , overflow, width, dan height untuk kawalan yang tepat dalam viewport. position
Melaksanakan fungsi beratur jQuery untuk mengatur urutan animasi: label menyembunyikan, skrol viewport, dan label muncul semula dengan lancar semasa navigasi.
mengikat pengendali acara jQuery untuk bertindak balas terhadap interaksi pengguna (klik butang) untuk menavigasi melalui bahagian pameran.

Struktur HTML:

div bertindak sebagai bekas, mengawal apa yang dapat dilihat. Div bersarang ( dan viewport) memegang kandungan dan label yang muncul pada tatal. Div sections membungkus ini untuk pengurusan menatal yang lebih mudah. Akhirnya, butang memberikan navigasi. labels scrollable

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

CSS mentakrifkan dimensi viewport, menghalang limpahan kandungan, dan gaya bahagian dan label. Imej latar belakang ditambah ke bahagian.

#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; }

animasi jQuery dan pengendalian acara:

Kod JQuery menguruskan urutan animasi (menyembunyikan label, tatal, tunjukkan label) menggunakan fungsi

. Pengendali acara terikat pada butang untuk navigasi. Kesan opacity ditambah untuk label pada hover.

queue

ingat untuk menggantikan URL imej pemegang tempat dengan laluan imej sebenar anda. Panduan komprehensif ini menyediakan asas yang mantap untuk mewujudkan pameran yang dinamik dan menarik menggunakan jQuery.

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

Atas ialah kandungan terperinci Cara membuat pameran dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!