Bagaimana untuk menggunakan JavaScript untuk meluncurkan imej ke kiri dan kanan dan menambah kesan zum?

JavaScript Bagaimana untuk meluncurkan imej ke kiri dan kanan dan menambah kesan zum?

Dengan perkembangan Internet, gambar telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian kita. Dalam reka bentuk web, cara gambar dipersembahkan juga sangat penting. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk meluncurkan imej ke kiri dan kanan serta menambah kesan zum.

1. Struktur HTML

Pertama, kita perlu mencipta bekas imej dalam HTML dan meletakkan elemen imej di dalamnya. Contohnya:

<div class="slider">
  <img src="image1.jpg" alt="">
</div>

2. Tambah gaya CSS

Seterusnya, kita perlu menambah beberapa gaya CSS asas pada bekas imej untuk memastikan bekas imej boleh dipaparkan secara normal dan mempunyai saiz tertentu. Contohnya:

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. Untuk mencapai kesan gelongsor kiri dan kanan

Pertama, kita perlu mendapatkan bekas imej dan elemen imej, dan mengira jarak bagi setiap gelongsor. Kodnya adalah seperti berikut:

var slider = document.querySelector('.slider');
var image = document.querySelector('.slider img');
var slideDistance = 200; // 每次滑动的距离

Kemudian, kita boleh mengikat acara gelongsor pada bekas imej dan melaraskan kedudukan paparan imej mengikut arah gelongsor. Kodnya adalah seperti berikut:

slider.addEventListener('mousedown', startSlide);

function startSlide(e) {
  var startX = e.clientX;
  slider.addEventListener('mousemove', slideImage);

  function slideImage(e) {
    var moveX = e.clientX - startX;
    image.style.transform = 'translateX(' + moveX + 'px)';
  }

  slider.addEventListener('mouseup', stopSlide);
  slider.addEventListener('mouseleave', stopSlide);

  function stopSlide(e) {
    slider.removeEventListener('mousemove', slideImage);
    var moveX = e.clientX - startX;
    var absMoveX = Math.abs(moveX);
    var direction = moveX > 0 ? 'right' : 'left';

    if (absMoveX > slideDistance) {
      if (direction === 'right') {
        slideTo('prev');
      } else {
        slideTo('next');
      }
    } else {
      resetSlide();
    }
  }

  function resetSlide() {
    image.style.transform = 'translateX(0)';
  }

  function slideTo(direction) {
    var currentImageIndex = getIndex(image.getAttribute('src'));

    if (direction === 'prev') {
      currentImageIndex--;
    } else {
      currentImageIndex++;
    }

    if (currentImageIndex < 0) {
      currentImageIndex = imageList.length - 1;
    } else if (currentImageIndex >= imageList.length) {
      currentImageIndex = 0;
    }

    image.src = imageList[currentImageIndex];
    resetSlide();
  }
}

4. Tambah kesan zum

Jika kita ingin mencapai kesan zum semasa meluncurkan gambar, kita boleh mendapatkan jarak gelongsor dalam acara gelongsor dan laraskan saiz gambar mengikut jarak. . Kod tersebut adalah seperti berikut:

// 在 slideImage 函数中添加以下代码

function slideImage(e) {
  var moveX = e.clientX - startX;
  var scale = 1 - Math.abs(moveX) / (slider.offsetWidth / 2);

  if (scale < 0.3) {
    scale = 0.3;
  }

  image.style.transform = 'translateX(' + moveX + 'px) scale(' + scale + ')';
}

Melalui pelaksanaan kod di atas, kita boleh meluncurkan imej ke kiri dan kanan pada halaman web dan menambah kesan zum. Pada masa yang sama, semasa proses pelaksanaan, kami boleh melaraskan jarak gelongsor, nisbah penskalaan, dll. mengikut keperluan untuk memenuhi keperluan reka bentuk tertentu.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk meluncurkan imej ke kiri dan kanan dan menambah kesan zum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!