Bagaimana untuk menggunakan JavaScript untuk mencapai kesan penukaran gelongsor ke atas dan ke bawah bagi imej dan menambah animasi fade-in dan fade-out?

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor ke atas dan ke bawah bagi imej dan menambah animasi fade-in dan fade-out?

Dalam pembangunan web, selalunya perlu untuk mencapai kesan penukaran imej Anda boleh menggunakan JavaScript untuk mencapai penukaran gelongsor ke atas dan ke bawah, dan menambah kesan animasi fade-in dan fade-out tengok.

Pertama sekali, kami memerlukan bekas yang mengandungi berbilang imej Kami boleh menggunakan tag div dalam HTML untuk mengehoskan imej. Sebagai contoh, kami mencipta div dengan id "bekas imej" untuk memegang imej.

<div id="image-container">
   <img src="image1.jpg">
   <img src="image2.jpg">
   <img src="image3.jpg">
</div>

Seterusnya, kita perlu menulis kod JavaScript untuk mencapai kesan pensuisan. Di sini kami menggunakan pendengar acara untuk memantau acara tatal tetikus dan menukar imej berdasarkan arah tatal.

var container = document.getElementById("image-container");
var images = container.getElementsByTagName("img");
var currentIndex = 0;
var imageHeight = images[currentIndex].height;

window.addEventListener("wheel", function(event){
   var deltaY = event.deltaY;
   
   // 滚轮向下滚动，切换至下一张图片
   if (deltaY > 0 && currentIndex < images.length - 1) {
      currentIndex++;
   }
   
   // 滚轮向上滚动，切换至上一张图片
   else if (deltaY < 0 && currentIndex > 0) {
      currentIndex--;
   }
   
   // 计算图片容器需要滚动的距离
   var scrollDistance = currentIndex * imageHeight;
   
   // 使用CSS的tranform属性实现滑动效果
   container.style.transform = "translateY(-" + scrollDistance + "px)";
   
   // 使用CSS的transition属性实现淡入淡出效果
   container.style.opacity = 0.5;
});

Dalam kod di atas, deltaY表示滚轮滚动的距离，currentIndex表示当前显示的图片索引，imageHeight mewakili ketinggian setiap imej. Dengan mendengar acara roda, kesan pensuisan dicapai mengikut arah guling roda dan indeks imej yang dipaparkan pada masa ini. Kemudian, gunakan atribut transformasi CSS untuk meluncurkan bekas imej ke atas dan ke bawah ke kedudukan yang sepadan dan gunakan atribut peralihan untuk menetapkan ketelusan untuk mencapai kesan animasi fade-in dan fade-out.

Dalam penggunaan sebenar, gaya yang berkaitan boleh dilaraskan dan dioptimumkan mengikut keperluan.

Di atas ialah contoh kod yang menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor ke atas dan ke bawah bagi imej dan menambah animasi fade-in dan fade-out. Dengan mendengar acara tatal tetikus, kita boleh menukar gambar mengikut arah tatal roda, dan menggunakan sifat transformasi CSS untuk mencapai kesan gelongsor, dan sifat peralihan untuk mencapai kesan fade-in dan fade-out, sekali gus menjadikan gambar bertukar lebih lancar dan lebih jelas.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan penukaran gelongsor ke atas dan ke bawah bagi imej dan menambah animasi fade-in dan fade-out?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!