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

jquery menatal skrin penuh tanpa pemalam

王林

Lepaskan： 2023-05-18 20:31:10

asal

444 orang telah melayarinya

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!