Laksanakan kesan penukaran imej berdasarkan kemahiran javascript

Laksanakan kesan penukaran imej berdasarkan kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 15:05:08

asal

1318 orang telah melayarinya

Contoh dalam artikel ini berkongsi dengan anda kesan penukaran imej menggunakan js untuk rujukan anda. Kandungan khusus adalah seperti berikut
Gunakan js untuk mencapai kesan mengklik butang dan menukar imej:

<div class="box" id="box">
    <div class="img_box" id="img_box">
      <img src="../raw/b1.jpg" class="image" >
      <img src="../raw/b2.jpg" class="image" >
      <img src="../raw/b3.jpg" class="image" >
      <img src="../raw/b4.jpg" class="image" >
    </div>
    <div id="left" class="switch"></div>
    <div id="right" class="switch"></div>
  </div>

Salin selepas log masuk

Struktur: Gunakan div lebar dan ketinggian tetap sebagai bekas paling luar, tetapkan limpahan kepada tersembunyi,

Kemudian lebar img_box dalam ditetapkan kepada empat kali lebar kotak, dan ketinggian adalah sama, maksudnya, terdapat empat img dalam img_box, tetapi hanya satu yang kelihatan di bawah, kiri dan kanan, dilaksanakan sebagai butang Klik untuk menukar gambar bermakna menukar atribut kiri img_box, jadi img_box harus menetapkan kedudukan kepada mutlak img_box diletakkan relatif kepada kotak. Empat gambar ditetapkan untuk terapung di sebelah kiri, dan lebar serta tinggi adalah sama dengan kotak.

Kod CSS:

*{
  margin: 0;
  padding: 0;
}
.box{
  width: 800px;
  height: 400px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
.img_box{
  height: 400px;
  width: 3200px;
  position: absolute;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
}
img{
  width: 800px;
  height: 400px;
  float: left;
}
.switch{
  width: 200px;
  height: 100%;
  position: absolute;

}
#left{
  left: 0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
}
#right{
  right:0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
}
#left:hover{
  background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
}
#right:hover{
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
}

Salin selepas log masuk

Kiri dan kanan menggunakan warna latar belakang dan atribut kecerunan ketelusan, dan hanya menambah Firefox dan penyemak imbas webkit Selain itu, sesetengah penyemak imbas IE kini mempunyai dwi teras IE dan webkit, seperti 360 Safe Browser

Latar belakang: -moz-linear-gradient(kiri, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

Latar belakang: -webkit-linear-gradient(kiri, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

Untuk mencapai peralihan yang lancar apabila bertukar, atribut peralihan ditambah:

　-moz-transition: 0.5s;

　-webkit-transition: 0.5s;

kod js:

var box;
var count=1;
window.onload=function(){
  box=document.getElementById("img_box");
  var left=document.getElementById("left");
  var right=document.getElementById("right");
  left.addEventListener("click",_left);
  right.addEventListener("click",_right);
  document.body.addEventListener("mouseover",demo);
}
function _right(){
  var dis=0;
  if(count<4){
    dis=count*800;
  }else{
    dis=0;
    count=0;
  }
  box.style.left="-"+dis+"px";
  count+=1;
}
function _left(event){
  var dis=0;
  if(count>1){
    dis=(2-count)*800;
  }else{
    dis=-3*800;
    count=5;
  }
  box.style.left=dis+"px";
  count-=1;
}

Salin selepas log masuk

Gunakan kiraan pembolehubah global untuk merakam gambar yang dipaparkan pada masa ini Apabila butang suis diklik, kira gambar yang perlu dipaparkan berdasarkan kiraan, dan kemudian hitung dan tetapkan atribut kiri img_box.

Di atas ialah kod js yang diperkenalkan kepada anda untuk mencapai kesan penukaran imej. Saya harap ia dapat membantu anda mencapai kesan penukaran imej.