cari

Rumah  >  Artikel  >  hujung hadapan web  >  Laksanakan peralihan imej dengan kesan pudar menggunakan JavaScript

Laksanakan peralihan imej dengan kesan pudar menggunakan JavaScript

WBOY
WBOYke hadapan
2023-08-24 16:21:041268semak imbas

使用 JavaScript 实现具有淡入淡出效果的图像过渡

Penukaran imej bermaksud menukar imej dan menggantikan satu imej dengan imej lain. Pengguna boleh melihat peralihan imej dalam peluncur imej.

Semasa membangunkan peluncur imej, kita harus menumpukan pada animasi peralihan imej untuk menjadikan apl mempunyai pengalaman pengguna yang menarik. Dalam tutorial ini, kita akan belajar untuk menambah kesan pudar menggunakan pelbagai kaedah peralihan imej.

Tambah kelas pada imej untuk memaparkan imej dengan kesan pudar

Kami boleh menambah kesan pudar pada peralihan imej menggunakan CSS. Sifat peralihan CSS membolehkan kami menambah sebarang peralihan pada imej. Jadi kita boleh menambah CSS pada kelas dan menggunakan JavaScript kita boleh menambah kelas pada imej yang akan menambah peralihan kepada imej

Tatabahasa

Pengguna boleh mengikut sintaks di bawah untuk menambah kelas pada imej untuk memaparkan imej dengan kesan pudar. 

document.getElementById("image").classList = 'class_name';

Dalam sintaks di atas, kami mengakses imej menggunakan id dan menambah kelas "class_name" pada senarai kelas imej.

Contoh

Dalam contoh di bawah, kami telah menambahkan imej pada halaman web dan memberikannya ketinggian dan lebar menggunakan beberapa CSS. Selain itu, kami menambah nilai kelegapan 0 dalam kelas img.

Selain itu, kami menambahkan sifat "peralihan" dan "kelegapan" pada kelas animasi. Pada mulanya, imej tidak mengandungi kelas "bernyawa". Apabila pengguna mengklik butang, ia melaksanakan fungsi FadeIn(), menambah kelas "animate" pada imej.

Dalam output, kita dapat melihat bahawa imej memudar apabila kita menambah kelas "animate". 

<html>
<head>
   <style>
      img {
         opacity: 0;
      }
      .animate {
         -webkit-transition: 2s;
         transition: 2s;
         opacity: 1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> class </i> to add fadding effect in image transition </h2>
   <img id = "image" style = "width: 500px; height: 200px;" src = "https://www.tutorialspoint.com/static/images/logo-color.png" alt = "Logo Image"> <br>
   <button type = "button" onclick = "FadeIn()"> Fade In image </button>
   <script>
      function FadeIn() {
         document.getElementById("image").classList = 'animate';
      }
   </script>
</body>
</html>

Tambahkan peralihan pudar pada imej menggunakan kaedah fadeIn() dan fadeout() jQuery

Kaedah fadeout() JQuery membolehkan kami mengalih keluar imej daripada halaman web dengan kesan pudar. Kaedah fadeIn() membolehkan kami menambah imej dengan kesan pudar pada halaman web.

Di sini kita akan menggunakan kaedah fadeout() dan fadeIn() untuk menambah kesan pudar yang betul pada peralihan imej.

Tatabahasa

Pengguna boleh menggunakan kaedah fadeout() dan fadeIn() JQuery mengikut sintaks berikut untuk menambah kesan pudar pada peralihan imej. 

setInterval(fade, 3500);
function fade() {
   $("#slider img").eq(current).fadeOut(0);
   current = ++current % images.length;
   $("#slider img").eq(current).fadeIn(2000);
}

Dalam sintaks di atas, pembolehubah semasa menjejaki imej yang akan dipaparkan pada halaman web. Kami menggunakan kaedah fadeIn() untuk menunjukkan imej semasa dan menyembunyikan semua imej lain.

Langkah

Langkah 1 – Akses semua imej menggunakan nama kelas.

Langkah 2 – Gunakan gelung for untuk mengulangi semua imej dan menyembunyikan semua kecuali imej pertama menggunakan sifat paparan imej.

Langkah 3 – Buat pembolehubah yang dipanggil "semasa" dan mulakannya kepada sifar.

Langkah 4 – Buat fungsi startImageTrans() dan gunakan kaedah setInterval() di dalamnya untuk memanggil fungsi fade() selepas setiap 3500 milisaat. Walau bagaimanapun, pengguna boleh menetapkan selang masa mengikut keperluan mereka

Langkah 5 – Dalam fungsi fade(), gunakan kaedah eq() JQuery untuk mengakses anak semasa. Gunakan kaedah fadeout() untuk menyembunyikan imej semasa.

Langkah 6 – Tingkatkan nilai pembolehubah semasa sebanyak 1 atau tetapkan kepada 0 jika ia lebih besar daripada jumlah imej.

Langkah 7 – Gunakan kaedah fadeIn() untuk memaparkan imej semasa.

Contoh

Dalam contoh di bawah, kami telah mencipta elemen div HTML dan menambah lima imej berbeza. Kami melaksanakan algoritma di atas dalam JavaScript untuk semua imej satu demi satu, dengan kesan peralihan pudar. 

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <style>
      img {
         height: 200px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> jQuery fadeIn() method </i> to add fadding effect in image transition </h3>
   <div id="slider">
      <img src = "https://www.tutorialspoint.com/static/images/logocolor.png" class = "sliderImage" alt = "Image 1">
      <img src ="https://www.tutorialspoint.com/images/trending_categories.svg" class = "sliderImage" alt = "Image 2">
      <img src = "https://www.tutorialspoint.com/images/Data-Structure.png" class = "sliderImage" alt = "Image 3">
      <img src = "https://www.tutorialspoint.com/images/Javascript.png" class = "sliderImage" alt = "Image 4">
   </div>
   <br> <br>
   <button type = "button" onclick = "startImageTrans()"> Start Image Transitions </button>
   <script>
      let images = document.querySelectorAll('.sliderImage');
      for (let i = 0; i < images.length; i++) {
         if (i != 0)
         images[i].style.display = "none";
      }
      var current = 0;
      function startImageTrans() {
         setInterval(fade, 3500);
      }
      function fade() {
         
         // hide the previous image with fading effect
         $("#slider img").eq(current).fadeOut(0);
         current++;
         current = current % images.length;
         
         // show a current image with fading effect
         $("#slider img").eq(current).fadeIn(2000);
      }
   </script>
</body>
</html>

Tambahkan kesan pudar pada peralihan imej menggunakan sifat peralihan CSS

Dalam kaedah ini, kami akan menetapkan imej latar belakang untuk elemen HTML. Selain itu, kami akan menambah peralihan pudar ke latar belakang elemen HTML. Jadi, setiap kali kita menukar latar belakang, ia akan pudar masuk dan keluar.

Tatabahasa

Pengguna boleh mengikut sintaks berikut untuk menambah kesan pudar pada imej latar belakang menggunakan sifat peralihan CSS. 

<style>
#background-div {
   background-image: url("image_URL");
   transition: background 2s linear;
}
</style>
function FadeImage() {
   imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}

Kami menambahkan imej latar belakang pada elemen dan "berubah" ke latar belakang menggunakan CSS dalam sintaks di atas. Setiap kali kami menukar imej latar belakang menggunakan JavaScript, ia secara automatik menggunakan peralihan pudar pada imej.

Contoh

Dalam contoh di bawah, elemen div mengandungi imej latar belakang awal. Kami mencipta tatasusunan imej yang mengandungi URL imej latar belakang yang berbeza. Kami menggunakan kaedah setInterval() untuk memanggil fungsi fadeInImage() setiap 3000 milisaat.

Dalam fungsi fadeInImage(), kami menukar imej latar belakang berulang kali dan apabila imej berubah, peralihan pudar dibuat menggunakan CSS. 

<html>
<head>
   <style>
      #background-div {
         background-position: center;
         background-size: cover;
         background-image:
         url("https://www.tutorialspoint.com/images/trending_categories.svg");
         display: flex;
         height: 300px;
         width: 600px;
         transition: background 2s linear;
      }
   </style>
</head>
<body>
   <h3>Using the <i> CSS transition </i> to add fadding effect in image transition</h3>
   <div id = "background-div"></div>
   <script>
      let allImages = [
         "https://www.tutorialspoint.com/images/trending_categories.svg",
         "https://www.tutorialspoint.com/javascript/images/javascript-minilogo.jpg",
         "https://www.tutorialspoint.com/css/images/css-mini-logo.jpg",
      ]
      const imageDiv = document.getElementById("background-div");
      setInterval(FadeImage, 3000);
      let current = 0;
      function FadeImage() {
         current++;
         if (current >= allImages.length) current = 0;
         imageDiv.style.backgroundImage = `url(${allImages[current]})`;
      }
   </script>
</body>
</html>

Kami mempelajari tiga cara untuk menambah kesan pudar pada peralihan imej. Kami menggunakan kaedah fadeIn() dan fadeout() JQuery dalam kaedah kedua, dan sifat "peralihan" CSS dalam kaedah pertama dan ketiga.

Atas ialah kandungan terperinci Laksanakan peralihan imej dengan kesan pudar menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css html for 循环 display transition 算法
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menyemak sama ada nilai adalah seperti objek dalam JavaScript?Artikel seterusnya：Bagaimana untuk menyemak sama ada nilai adalah seperti objek dalam JavaScript?

Artikel berkaitan

Lihat lagi