jquery css untuk mencapai effect_jquery penukaran imej dinamik

Contoh dalam artikel ini menerangkan kod kesan penukaran imej dinamik yang dilaksanakan oleh jquery css. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

Idea asas: Tentukan tatasusunan untuk menyimpan gambar yang perlu dipaparkan, kemudian padamkan kelas zoomIn apabila gambar diklik, tambahkan kelas fadeOutRight dan nyatakan gambar sebenar bergerak ke kanan dan hilang, ingat Tambah 1 ke kaunter (digunakan untuk memanggil gambar seterusnya Apabila gambar dipadamkan 500 milisaat kemudian, ia dinilai sama ada gambar itu adalah yang terakhir balas kepada 0 dan padamkan kod gambar bermula dari gambar pertama , kemudian buat kod gambar baharu, tetapkan src kepada gambar seterusnya, dan tambah zoomIn animasi kelas gaya animasi zum untuk membolehkan gambar dianimasikan, dan kemudian masukkan kod gambar baharu sebelum elemen p.

Pilihan pertama ialah memperkenalkan fail animasi CSS dan perpustakaan jquery

<link rel="stylesheet" href="css/animate.min.css"/>
<script type="text/javascript" src="js/jquery/1.11.1/jquery.min.js"></script>

Bina html ringkas

<div class="container">
 <div class="center animated">
  <h1>Image Animation with A Single Img, CSS3 & some jQuery</h1>
  <img class="animated" src="images/island_1x.png" alt=""/>
   <p>
    <a target="_blank" href="#">脚本之家</a>,
  </p>
 </div>
</div>

Tambahkan beberapa CSS, jangan ragu untuk melaraskannya mengikut projek anda

 .container {
   width: 100vw;
   height: 100vh;
   background-color: #fff;
   position: absolute;
  }
 
  .center {
   width: 600px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   text-align: center;
 
   background-image: url(images/banana.png);
   background-position: -10000px,-10000px;
   background-repeat: no-repeat;
  }
 
  .center h1 {
   margin: 0px;
   padding: 0px;
   text-align: center;
   margin-bottom: 50px;
   font-size: 18px;
   text-transform: uppercase;
  }
 
  .center p{
   padding-top:50px;
   text-align: center;
   color: #ccc;
   font-size: 12px;
 
  }
 
  .center p a{
   text-decoration: none;
   color: inherit;
  }
 
  .center p a:hover{
   color:#222;
  }
 
  .center img{
   cursor: pointer;
  }

CSS asas meletakkan seluruh halaman dan animasi tidak dipengaruhi oleh CSS di atas.
Tulis JS untuk mencapai kesan animasi

 var imgs=[ //定义存放图片路径的数组
   "images/island_1x.png",
   "images/banana.png",
   "images/rescued-illos_1x.png",
   "images/rivalry_1x.png",
   "images/sir_crags_a_lot_1x.png",
   "images/sf-cryptids_1x.png",
   "images/db_space_1x.png",
   "images/xmas1_1x.png"
 ];
 var counter =0; //图片的记数器
 $(document).ready(function () {
  $(".center").on("click","img",function(){ //定义.center单击图片事件
   $(this).removeClass("zoomIn").addClass("fadeOutRight"); //删除单击图片的zoomIn类，添加fadeOutRight类
   counter++; //记数器加1
   setTimeout(function(){ //500毫秒后执行此方法
    if(counter==imgs.length) counter=0; //如果到了最后一张图片则返回第一张
    $(".center img").remove(); //删除图片
    $("<img/>").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p"));
    //拼接成下一张图片并加上缩放动画样式类animated zoomIn,最后添加上.center p元素前
    if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")")
    //如果下一张图片没有定义，刚为.center元素的背影图片改为下一张图片（不明白加此行代码的用意，感觉没意义。。。）
   },500);
  });
 
 });

Muat turun kod sumber: jquery css untuk mencapai kod sumber kesan penukaran imej dinamik

Di atas adalah jquery digabungkan dengan css untuk mencapai kesan penukaran imej yang dinamik Kod yang dikongsi sangat terperinci dan memberikan idea asas kod saya harap anda menyukainya dan boleh menggunakan apa yang telah anda pelajari.