Gunakan JavaScript untuk melaksanakan kesan khas imej dan kesan peralihan

Dengan pembangunan berterusan teknologi web, semakin banyak kesan khas dan kesan peralihan digunakan pada reka bentuk web. Antaranya, kesan khas gambar dan kesan peralihan adalah yang paling biasa dalam reka bentuk web. JavaScript ialah bahasa skrip yang biasa digunakan dalam pembangunan bahagian hadapan, dan ia juga mempunyai kelebihan tertentu dalam merealisasikan kesan khas imej dan kesan peralihan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan kesan khas imej dan kesan peralihan.

1. Gambar kesan khas

1. Tuding tetikus untuk membesarkan gambar

Apabila tetikus melayang di atas gambar, saiz gambar digandakan melalui JavaScript , kesan ini boleh menjadikan gambar lebih menonjol dan menarik perhatian pengguna.

Kod pelaksanaan adalah seperti berikut:

img.onmouseover = function() {
  this.style.transform = "scale(2)";
}
img.onmouseout = function() {
  this.style.transform = "scale(1)";
}

2. Gambar meluncur

Gelongsor gambar dalam satu arah (atas, bawah, kiri, kanan) ke jadikan Halamannya lebih lancar dan terang.

Kod pelaksanaan adalah seperti berikut:

function slide(direction) {
  switch (direction) {
    case "up":
      img.style.top = "-200px";
      break;
    case "down":
      img.style.top = "200px";
      break;
    case "left":
      img.style.left = "-200px";
      break;
    case "right":
      img.style.left = "200px";
      break;
  }
}

3. Zum gambar

Zum gambar boleh membesarkan atau mengecilkan gambar untuk menjadikannya lebih jelas atau lebih kecil. Pada masa yang sama, kesan lancar boleh dicapai melalui animasi kecerunan.

Kod pelaksanaan adalah seperti berikut:

function zoom(scale) {
  img.style.transition = "transform 0.5s ease-in-out";
  img.style.transform = "scale(" + scale + ")";
}

2. Kesan peralihan

1. Peralihan kecerunan

Dalam reka bentuk web, kesan kecerunan. biasa digunakan Perbezaan antara unsur peralihan dan kerajang. Peralihan kecerunan boleh dicapai melalui JavaScript untuk menjadikan halaman lebih semula jadi.

Kod pelaksanaan adalah seperti berikut:

function changeColor(color) {
  img.style.background = color;
  img.style.transition = "background 0.5s ease-in-out";
}

2. Pudar masuk dan keluar

Kesan pudar masuk dan keluar menjadikan elemen secara beransur-ansur menjadi telus atau muncul , yang boleh menjadikan halaman lebih lembut.

Kod pelaksanaan adalah seperti berikut:

function fade(type) {
  switch (type) {
    case "in":
      img.style.opacity = "1";
      img.style.transition = "opacity 0.5s ease-in-out";
      break;
    case "out":
      img.style.opacity = "0";
      img.style.transition = "opacity 0.5s ease-in-out";
      break;
  }
}

3. Putaran

Kesan putaran boleh membuat elemen berputar di sepanjang titik tengah, menunjukkan sudut yang berbeza. Jadikan halaman lebih meriah.

Kod pelaksanaan adalah seperti berikut:

function rotate(degree) {
  img.style.transform = "rotate(" + degree + "deg)";
  img.style.transition = "transform 0.5s ease-in-out";
}

Di atas ialah beberapa contoh kod untuk menggunakan JavaScript untuk melaksanakan kesan khas imej dan kesan peralihan. Dalam pembangunan sebenar, ia perlu diterapkan secara fleksibel mengikut keperluan tertentu. Pada masa yang sama, sila ambil perhatian bahawa penggunaan kesan khas yang berlebihan akan menjejaskan prestasi halaman, jadi anda mesti menguasai prinsip penggunaan sederhana.

Atas ialah kandungan terperinci Gunakan JavaScript untuk melaksanakan kesan khas imej dan kesan peralihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!