[Ringkasan] 3 fungsi kecil yang menarik yang boleh dilaksanakan oleh JavaScript

JavaScript ialah bahasa skrip yang digunakan secara meluas dalam pembangunan bahagian hadapan web dan mempunyai sumber yang kaya dalam melaksanakan fungsi kecil. Artikel ini akan memperkenalkan beberapa pelaksanaan fungsi kecil yang menarik untuk membantu pembaca memahami lebih lanjut aplikasi JavaScript.

1. Pengikut tetikus

Pengikut tetikus ialah fungsi kecil yang membolehkan elemen bergerak semasa tetikus bergerak. Kesan dinamik ini memberikan orang perasaan interaktif dan sesuai untuk hiasan laman web.

Kaedah pelaksanaan:

1. Pertama tentukan elemen dalam fail HTML yang perlu mengikut pergerakan tetikus, seperti ikon atau teks.

<div class="follow"></div>

2. Tetapkan gaya asas dalam CSS dan tetapkan kedudukan elemen kepada kedudukan tetap.

.follow {
   ...
   position: fixed;
}

3. Tambahkan acara mendengar tetikus dalam JavaScript, tukar kedudukan elemen dan buat ia bergerak dengan kedudukan tetikus.

document.addEventListener('mousemove', (event) => {
  const followItem = document.querySelector('.follow');
  followItem.style.left = event.clientX + 'px';
  followItem.style.top = event.clientY + 'px';
})

2. Karusel gambar

Karusel gambar ialah kesan interaktif yang sangat baik yang sering muncul di tapak web. Beralih antara imej yang berbeza, menghasilkan kesan animasi yang berterusan dan lancar.

Kaedah pelaksanaan:

1. Tentukan beberapa gambar dalam fail HTML mengikut keperluan reka bentuk Anda boleh menggunakan tag img atau tetapkan imej latar belakang dalam CSS.

<div class="slider">
    <img src="./img/1.jpg" />
    <img src="./img/2.jpg" />
    <img src="./img/3.jpg" />
</div>

2. Tetapkan gaya bekas karusel imej dalam CSS untuk membina bingkai karusel.

.slider {
   width: 100%;
   height: 500px;
   overflow: hidden;
  position: relative;
}

3. Tambahkan pemasa dalam JavaScript untuk mengawal putaran imej.

setInterval(() => {
   // 定时器要做的事情
}, 2000); // 每2秒执行一次

4 Di dalam pemasa, gunakan atribut transformasi CSS untuk mencapai kesan animasi penukaran imej.

let index = 0; // 初始值为0
const slider = document.querySelector('.slider');
const imgs = slider.children; // 获取容器内所有img元素
setInterval(() => {
   index++;
   if(index === imgs.length) {
      index = 0;
   }
   const showImg = imgs[index];
   showImg.classList.add('show');
   ... // 隐藏其他图片
}, 2000);

3. Kembangkan dan runtuhkan

Dalam halaman web, kita selalunya perlu menetapkan beberapa penyembunyian awal dan pengguna boleh mengklik pada modul fungsi yang dikembangkan. Pelaksanaan modul berfungsi ini boleh diselesaikan menggunakan JavaScript dan CSS.

Kaedah pelaksanaan:

1. Mula-mula tulis modul yang perlu dikembangkan dan diruntuhkan dalam fail HTML.

<div class="box">
   <div class="title">更多</div>
   <div class="content" style="display: none">
      ...
   </div>
</div>

Atribut gaya elemen kandungan menetapkan paparan kepada tiada, yang bermaksud elemen itu tersembunyi dalam keadaan awal.

2. Tetapkan gaya asas dalam CSS dan tambahkan pendengar acara untuk acara klik

.box .title {
   cursor: pointer;
}

3 Dalam fail JavaScript, gunakan kaedah addEventListener untuk mendengar acara klik dan tentukan status elemen kandungan, gunakan atribut paparan CSS untuk menukar fungsi kembangkan dan runtuh.

const box = document.querySelector('.box');
box.addEventListener('click', () => {
   const content = box.querySelector('.content');
   if(content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
});

Di atas adalah kaedah pelaksanaan tiga fungsi kecil Selagi kita mahir menggunakan sintaks asas JavaScript dan fail perpustakaan yang berkaitan, kita boleh mencapai kesan interaktif yang kaya dalam halaman web. Pembaca boleh cuba menggunakan kaedah ini dalam projek mereka untuk meningkatkan kemahiran pembangunan bahagian hadapan mereka.

Atas ialah kandungan terperinci [Ringkasan] 3 fungsi kecil yang menarik yang boleh dilaksanakan oleh JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!