Beberapa kesan imej JavaScript biasa

Sebagai bahasa pengaturcaraan yang dinamik dan interaktif, JavaScript telah menjadi bahagian yang amat diperlukan dalam pembangunan web. Antaranya, JavaScript menyediakan pelbagai kesan dan kaedah untuk pemprosesan dan pembentangan imej, membolehkan kami mencapai pelbagai kesan visual yang menakjubkan pada halaman web dan meningkatkan pengalaman pengguna. Seterusnya, artikel ini akan memperkenalkan beberapa kesan imej JavaScript biasa.

1. Karusel gambar

Karusel gambar ialah kesan gambar biasa pada halaman web, yang boleh memaparkan berbilang gambar pada kedudukan yang sama. Kesan ini bukan sahaja cantik dan praktikal, tetapi juga boleh membawa lebih banyak trafik ke laman web. Dalam JavaScript, prinsip asas untuk melaksanakan imej karusel ialah menukar alamat imej dan helaian gaya yang berkaitan secara berterusan melalui pemasa dan tatasusunan.

Berikut ialah contoh karusel imej ringkas:

HTML:

<div id="slider">
  <img src="img1.jpg" alt="image1" class="active">
  <img src="img2.jpg" alt="image2">
  <img src="img3.jpg" alt="image3">
</div>

CSS:

#slider img {
  display: none;
  width: 100%;
}
  
#slider img.active {
  display: block;
}

JavaScript:

let sliderImages = document.querySelectorAll('#slider img');
let currentImageIndex = 0;

setInterval(() => {
  sliderImages[currentImageIndex].classList.remove('active');
  currentImageIndex = (currentImageIndex + 1) % sliderImages.length;
  sliderImages[currentImageIndex].classList.add('active');
}, 3000);

2. Pramuat imej

Pramuat imej boleh memuatkan sumber imej terlebih dahulu sebelum imej benar-benar dipaparkan Ini boleh memastikan imej dipaparkan dengan lancar pada halaman dan meningkatkan pengalaman pengguna tapak web. Dalam JavaScript, pramuat imej dicapai terutamanya dengan mencipta objek Imej baharu dan pramuat imej dengan menetapkan atribut src dalam objek.

Berikut ialah contoh pramuat imej yang mudah:

JavaScript:

function preloadImage(url) {
  let img = new Image();
  img.src = url;
}

preloadImage("img1.jpg");
preloadImage("img2.jpg");
preloadImage("img3.jpg");

3 Penyeretan imej

Seretan imej membolehkan pengguna Kawal imej gelongsor, menyeret dan operasi lain untuk meningkatkan interaktiviti tapak web. Dalam JavaScript, operasi seret imej dilaksanakan dengan mendengar peristiwa tetikus.

Berikut ialah contoh seret imej mudah:

HTML:

<div id="image-container">
  <img src="img.jpg" alt="image">
</div>

CSS:

#image-container {
  position: relative;
}
  
#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
}

JavaScript:

let image = document.querySelector('#image-container img');
let isDragging = false;
let startX, startY;

image.addEventListener('mousedown', function(event) {
  isDragging = true;
  startX = event.clientX - image.offsetLeft;
  startY = event.clientY - image.offsetTop;
});
  
image.addEventListener('mousemove', function(event) {
  if (isDragging) {
    image.style.left = (event.clientX - startX) + 'px';
    image.style.top = (event.clientY - startY) + 'px';
  }
});

image.addEventListener('mouseup', function(event) {
  isDragging = false;
});

4. Gambar kabur

Kabur gambar ialah kesan khas yang biasa digunakan dalam halaman web, yang boleh mengaburkan gambar dan menjadikan kesan visual tapak web lebih lembut. Dalam JavaScript, gunakan atribut penapis dalam CSS untuk mencapai kesan kabur imej.

Berikut ialah contoh kabur imej mudah:

HTML:

<img id="blur-image" src="img.jpg" />

CSS:

#blur-image {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

Dalam kod, kita boleh lulus Laraskan nilai parameter fungsi kabur untuk melaraskan tahap kabur imej.

Di atas ialah beberapa kesan imej JavaScript biasa. Sudah tentu, JavaScript mempunyai banyak kesan imej lain, seperti saiz semula imej, penapis imej, dll. Kita boleh memilih teknologi yang sesuai untuk melaksanakannya mengikut keperluan tertentu. Ringkasnya, dalam proses pembangunan web, menambah kesan imej JS ialah cara yang baik untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Beberapa kesan imej JavaScript biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!