jquery menatal skrin penuh tanpa pemalam-Soal Jawab bahagian hadapan-php.cn

Rumah

hujung hadapan web

Soal Jawab bahagian hadapan

jquery menatal skrin penuh tanpa pemalam

王林

May 18, 2023 pm 08:31 PM

Dengan pembangunan berterusan teknologi Web, semakin banyak tapak web menggunakan kesan tatal skrin penuh, membolehkan pengguna menyemak imbas berbilang kawasan kandungan dalam satu halaman. Terdapat banyak cara untuk mencapai kesan ini, antaranya yang lebih biasa digunakan ialah menggunakan pemalam jQuery. Tetapi apa yang saya ingin perkenalkan hari ini ialah bagaimana untuk mencapai tatal skrin penuh tanpa menggunakan pemalam jQuery.

Struktur HTML

Kami perlu menentukan struktur HTML tapak web kami terlebih dahulu. Dalam contoh ini, kami akan menggunakan imej sebagai latar belakang skrin pertama, dan skrin kedua akan memaparkan teks. Oleh itu, struktur HTML kami hendaklah:

<body>
  <div class="section section-1">
    <div class="bg-img"></div>
  </div>
  <div class="section section-2">
    <div class="text"></div>
  </div>
</body>

Dapat dilihat bahawa kami membahagikan keseluruhan halaman kepada dua bahagian, setiap bahagian adalah bahagian, dan latar belakang skrin pertama ialah tetingkap dengan .bg- div daripada class img, manakala skrin kedua mengandungi div dengan class .text.

Gaya CSS

Seterusnya, kami perlu menambah gaya pada halaman kami. Kita perlu menetapkan ketinggian halaman kepada ketinggian tetingkap penyemak imbas dan tetapkan ketinggian setiap bahagian kepada 100%. Pada masa yang sama, kita perlu menetapkan kedudukan semua bahagian kepada kedudukan mutlak supaya kita boleh menatal halaman kemudian.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.section {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.section-1 {
  background-color: #f9f9f9;
}

.bg-img {
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
  background-position: center;
  height: 100%;
}

.section-2 {
  background-color: #fff;
}

Kod JavaScript

Kini kami perlu menambah kod JavaScript pada tapak web kami untuk membolehkan penatalan halaman. Kita boleh menggunakan roda tetikus atau papan kekunci anak panah ke atas dan ke bawah untuk menatal halaman.

var sectionIndex = 0;
var sections = $('.section');
var totalSections = sections.length;

$(document).on('mousewheel DOMMouseScroll', function (e) {
  if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
    //向上滚动
    sectionIndex--;
  } else {
    //向下滚动
    sectionIndex++;
  }
  if (sectionIndex < 0) {
    sectionIndex = 0;
  }
  if (sectionIndex > totalSections - 1) {
    sectionIndex = totalSections - 1;
  }
  scrollToSection(sectionIndex);
});

$(document).keydown(function (e) {
  switch (e.which) {
    case 38: //向上箭头
      sectionIndex--;
      break;
    case 40: //向下箭头
      sectionIndex++;
      break;   
    default:
      return; 
  }
  if (sectionIndex < 0) {
    sectionIndex = 0;
  }
  if (sectionIndex > totalSections - 1) {
    sectionIndex = totalSections - 1;
  }
  scrollToSection(sectionIndex);    
});

function scrollToSection(sectionIndex) {
  $('html, body').animate({
    scrollTop: sections.eq(sectionIndex).offset().top
  }, 500);
}

Kami menentukan pembolehubah indeks bahagian untuk merekodkan kedudukan skrin semasa untuk penatalan seterusnya Kami juga menentukan pembolehubah bahagian untuk menyimpan semua elemen bahagian dan pembolehubah totalSections untuk merekodkan bilangan bahagian.

Seterusnya, kami menambah pendengar acara untuk roda tetikus dan papan kekunci anak panah atas dan bawah Apabila pengguna menatal, kami akan menambah atau menurunkan sectionIndex dan menyemak sama ada nilai sectionIndex melebihi jumlah skrin ke. Pastikan skrin yang kami gunakan adalah sah. Akhir sekali, kami memanggil fungsi scrollToSection untuk melompat ke skrin sasaran.

Fungsi scrollToSection menggunakan kaedah animasi jQuery untuk menatal dengan lancar ke kedudukan bahagian yang ditentukan. Kami juga boleh mengubah suai masa tatal jika perlu.

Paparan Hasil

Akhir sekali, kami telah berjaya melaksanakan kesan tatal skrin penuh yang tidak memerlukan penggunaan pemalam jQuery. Kesannya adalah seperti berikut:

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan JavaScript dan jQuery tulen untuk mencapai kesan tatal skrin penuh, Kesan pelaksanaan juga ditunjukkan. Walaupun pemalam jQuery boleh menjadikan pelaksanaan lebih mudah, menggunakan JavaScript asli membolehkan kami lebih memahami prinsip kerja dan logik di sebalik kod itu, dan juga membolehkan kami menyesuaikan kesan penatalan dengan lebih fleksibel.

Atas ialah kandungan terperinci jquery menatal skrin penuh tanpa pemalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Saiz Ekosistem React: Menavigasi Landskap KompleksApr 28, 2025 am 12:21 AM

TonavigateReact'scomplexplexecystemefectively, fahamiThetoolsandlibraries, accentizeTheirstrengthsandWeaknesses, andintegratethemtoenhancedevelopment.startwithcorereactconceptsandusestate, thengradlyintroduceMoreSlikePompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompiker

Bagaimana React menggunakan kekunci untuk mengenal pasti item senarai dengan cekapApr 28, 2025 am 12:20 AM

ReactusesKeystoefficientyDidentyListItemsByprovidingStableIdentityToeachelement.1) KeysallowreacttotrackChangesInlistSwithoutre-renderingheentireList.2) PilihUniqueAndStableKeys, mengelakkanAringArrayIndices.3) correcteyusageSageSageSageSageSageSymifiFicelyimproves

Debugging Isu yang berkaitan dengan kunci dalam React: Mengenal pasti dan menyelesaikan masalahApr 28, 2025 am 12:17 AM

KeysinreactarecrucialForOptimizingTheringProcessandManagingDynamicListSeffectively.tospotandfixkey-Relatedissues: 1) adduniquekeystolistitemstoavoidwarningsandperformanceissues, 2) UseUniquIdierFiersfromdatainsteadofindicessfeadofindicesshipsfeadofindicesshipsfeadofindicesshipsfeadofindicessfeadofindicesshipsfeadofindicesshipsfeadofindicesshipsfeadofindicessfeadofindicessfeadofindices,

Mengikat data satu arah React: Memastikan aliran data yang boleh diramalApr 28, 2025 am 12:05 AM

Mengikat data satu arah React memastikan data mengalir dari komponen induk ke komponen kanak-kanak. 1) Data mengalir ke satu, dan perubahan dalam keadaan komponen induk boleh diserahkan kepada komponen kanak -kanak, tetapi komponen kanak -kanak tidak dapat secara langsung mempengaruhi keadaan komponen induk. 2) Kaedah ini meningkatkan ramalan aliran data dan memudahkan debugging dan ujian. 3) Dengan menggunakan komponen dan konteks terkawal, interaksi pengguna dan komunikasi antara komponen dapat dikendalikan sambil mengekalkan aliran data sehala.

Amalan terbaik untuk memilih dan menguruskan kekunci dalam komponen ReactApr 28, 2025 am 12:01 AM

KeysinreactarecrucialforefficientdomupdatesandReconciliation.1) yang boleh dipilih, unik, danmeaningfulkeys, likeitemids.2) FornestedLists, UseUniqueySateachLevel.3) EvoleUsingArtAringArrayIrdicesorGeneratingKeysdynamicallytopreventPrevanceSsues.

Mengoptimumkan Prestasi dengan UseState () dalam Aplikasi ReactApr 27, 2025 am 12:22 AM

useState () iscrucialforoptimizingreactappperformanceduetoitsimpactonre-rendersandupdates.tooptimize: 1) useusecallbacktomemoizeFunctionsandpreventunnessaryre-renders.2)

Berkongsi keadaan antara komponen menggunakan konteks dan useState ()Apr 27, 2025 am 12:19 AM

Gunakan konteks dan digunakan untuk berkongsi negeri kerana mereka dapat memudahkan pengurusan negeri dalam aplikasi reaksi yang besar. 1) Mengurangkan propdrilling, 2) kod yang lebih jelas, 3) lebih mudah untuk menguruskan keadaan global. Walau bagaimanapun, perhatikan prestasi overhead dan debugging. Penggunaan rasional konteks dan teknologi pengoptimuman dapat meningkatkan kecekapan dan pemeliharaan aplikasi.

Kesan kekunci yang salah pada kemas kini DOM maya ReactApr 27, 2025 am 12:19 AM

Menggunakan kekunci yang salah boleh menyebabkan masalah prestasi dan tingkah laku yang tidak dijangka dalam aplikasi React. 1) Kuncinya adalah pengenal unik item senarai, membantu React mengemas kini DOM maya dengan cekap. 2) Menggunakan kunci yang sama atau tidak unik akan menyebabkan item senarai disusun semula dan keadaan komponen hilang. 3) Menggunakan pengenal yang stabil dan unik sebagai kunci dapat mengoptimumkan prestasi dan mengelakkan penanaman semula penuh. 4) Gunakan alat seperti Eslint untuk mengesahkan ketepatan kunci. Penggunaan kunci yang betul memastikan aplikasi React yang cekap dan boleh dipercayai.

See all articles