Bagaimana untuk menggunakan JavaScript untuk meluncurkan imej ke atas dan ke bawah dan menambah kesan zum sambil mengehadkannya kepada bekas?

JavaScript Bagaimana untuk meluncurkan imej ke atas dan ke bawah dan menambah kesan zum sambil mengehadkannya kepada bekas?

Dalam reka bentuk web moden, selalunya perlu melakukan operasi interaktif dan peningkatan kesan pada imej. Antaranya, kesan gelongsor dan zum naik dan turun gambar adalah keperluan biasa. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan ini dan mengehadkannya dalam bekas.

1. Pelaksanaan kesan gelongsor atas dan bawah

Menyedari kesan gelongsor atas dan bawah gambar bergantung terutamanya pada peristiwa tetikus atau sentuhan, dan memerlukan kawalan kedudukan gambar.

Pertama, dalam bahagian HTML, kami mencipta bekas dan elemen imej:

<div id="container">
  <img id="image" src="img.jpg">
</div>

Kemudian, dalam JavaScript, kita perlu menambah pendengar acara kepada elemen imej dan menggerakkan imej berdasarkan perubahan kedudukan tetikus atau Kedudukan acara sentuh:

var container = document.getElementById('container');
var image = document.getElementById('image');

var startY; // 记录初始位置

image.onmousedown = start;
image.addEventListener('touchstart', start, false);

function start(e) {
  e.preventDefault();
  
  if (e.touches) {
    startY = e.touches[0].clientY;
    document.addEventListener('touchmove', move, false);
    document.addEventListener('touchend', end, false);
  } else {
    startY = e.clientY;
    document.onmousemove = move;
    document.onmouseup = end;
  }
}

function move(e) {
  var currentY = e.touches ? e.touches[0].clientY : e.clientY;
  var diffY = currentY - startY;
  
  image.style.top = image.offsetTop + diffY + 'px';
}

function end() {
  document.removeEventListener('touchmove', move, false);
  document.removeEventListener('touchend', end, false);
  document.onmousemove = null;
  document.onmouseup = null;
}

Melalui kod di atas, apabila pengguna menekan tetikus atau menyentuh skrin, kedudukan awal akan dirakam, dan apabila tetikus atau jari bergerak, kedudukan gambar juga akan berubah. Pada penghujung operasi, alih keluar pendengar acara.

2. Pelaksanaan kesan zum

Realisasi kesan zum gambar adalah berdasarkan pertimbangan kedudukan dan gerak isyarat tetikus atau peristiwa sentuhan. Berikut ialah contoh menggunakan gerak isyarat untuk menentukan zum:

var scalingFactor = 1.0; // 初始化缩放比例
var gestureStartDistance; // 记录初始手势距离

image.addEventListener('gesturestart', start, false);
image.addEventListener('gesturechange', change, false);
image.addEventListener('gestureend', end, false);

function start(e) {
  e.preventDefault();
  gestureStartDistance = getGestureDistance(e);
}

function change(e) {
  var currentDistance = getGestureDistance(e);
  scalingFactor = currentDistance / gestureStartDistance;
  
  image.style.transform = 'scale(' + scalingFactor + ')';
}

function end() {
  gestureStartDistance = null;
}

function getGestureDistance(e) {
  var x1 = e.touches[0].pageX;
  var y1 = e.touches[0].pageY;
  var x2 = e.touches[1].pageX;
  var y2 = e.touches[1].pageY;
  
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}

Dalam kod di atas, apabila jari mula menyentuh skrin, jarak gerak isyarat awal direkodkan. Apabila jari bergerak, nisbah zum ditetapkan dengan mengira nisbah jarak gerak isyarat semasa kepada jarak gerak isyarat awal dan digunakan pada imej.

3. Terhad kepada bekas

Untuk memastikan imej meluncur dan bersisik di dalam bekas tanpa melimpahi bekas, kita perlu membuat beberapa pertimbangan kedudukan dan saiz.

Pertama, dalam bahagian CSS, tetapkan lebar dan tinggi bekas, dan tambah gaya pada bekas overflow: hidden; untuk menyembunyikan kandungan limpahan:

#container {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

Kemudian, dalam JavaScript, kita perlu menentukan kedudukan dan kedudukan imej semasa gelongsor dan zum. Sama ada saiz melebihi sempadan bekas dan laraskannya:

function move(e) {
  var currentY = e.touches ? e.touches[0].clientY : e.clientY;
  var diffY = currentY - startY;
  
  var minTop = container.clientHeight - image.height; // 图片最小可到达的top值
  var maxTop = 0; // 图片最大可到达的top值
  
  var newTop = image.offsetTop + diffY;
  newTop = Math.max(minTop, Math.min(maxTop, newTop));
  
  image.style.top = newTop + 'px';
}

function change(e) {
  var currentDistance = getGestureDistance(e);
  scalingFactor = currentDistance / gestureStartDistance;
  
  var newWidth = image.width * scalingFactor;
  var newHeight = image.height * scalingFactor;
  
  var minWidth = container.clientWidth;
  var minHeight = container.clientHeight;
  
  var maxWidth = image.width;
  var maxHeight = image.height;
  
  newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
  newHeight = Math.max(minHeight, Math.min(maxHeight, newHeight));
  
  image.style.width = newWidth + 'px';
  image.style.height = newHeight + 'px';
}

Melalui kod di atas, kami akan mengira nilai dan saiz atas minimum dan maksimum berdasarkan saiz bekas dan saiz imej , dan semasa proses gelongsor dan penskalaan, Hakim dan laraskan.

Ringkasnya, gelongsor ke atas dan ke bawah imej dan penambahan kesan zum direalisasikan melalui JavaScript, dan ia terhad kepada bekas. Kesan gelongsor dicapai melalui pemantauan peristiwa tetikus atau sentuhan dan pengiraan kedudukan. Melalui pemantauan peristiwa gerak isyarat dan pengiraan jarak, kesan zum dicapai. Dengan menilai kedudukan dan saiz, kesan terhad kepada bekas dicapai.

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