JavaScript 如何實現圖片的上下滑動並加入縮放效果同時限制在容器內？

JavaScript 如何實作圖片的上下滑動並加入縮放效果同時限制在容器內？

在現代網頁設計中，常常需要對圖片進行互動性操作和效果增強。其中，圖片的上下滑動和縮放效果是常見的需求。本文將介紹如何使用JavaScript實現這些效果，並且限制在容器內。

一、上下滑動效果的實現

實現圖片的上下滑動效果主要依賴滑鼠或觸控事件，並且需要控制圖片的位置。

首先，在HTML部分，我們建立一個容器和一個圖片元素：

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

然後，在JavaScript中，我們需要為圖片元素新增事件監聽器，並且根據滑鼠或觸控事件的位置變化，來移動圖片的位置：

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;
}

透過以上程式碼，當使用者按下滑鼠或觸控螢幕時，會記錄下初始的位置，並且隨著滑鼠或手指的移動，圖片的位置也會隨之改變。在結束操作時，移除事件監聽器。

二、縮放效果的實現

實現圖片的縮放效果是基於滑鼠或觸控事件的位置和手勢的判斷。以下是一個例子，使用手勢判斷縮放：

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));
}

在上述程式碼中，當手指開始接觸螢幕時，記錄下初始手勢距離。當手指移動時，透過計算當前手勢距離與初始手勢距離的比例，來設定縮放比例，並套用到圖片上。

三、限制在容器內

為了確保圖片在容器內部滑動和縮放，並且不溢出容器範圍，我們需要進行一些位置和尺寸的判斷。

首先，在CSS部分，設定容器的寬度和高度，並為容器添加樣式overflow: hidden;來隱藏溢出內容：

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

然後，在JavaScript中，我們需要在滑動和縮放的過程中，判斷圖片的位置和尺寸是否超出容器的邊界，並進行調整：

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';
}

透過以上程式碼，我們會根據容器的尺寸和圖片的尺寸，計算出最小和最大的top值和尺寸，並且在滑動和縮放的過程中，進行判斷和調整。

綜上所述，透過JavaScript實現了圖片的上下滑動並加入縮放效果，並且限制在容器內。透過滑鼠或觸控事件的監聽和位置的計算，實現了滑動效果。透過手勢事件的監聽和距離的計算，實現了縮放效果。透過對位置和尺寸的判斷，實現了限制在容器內的效果。

以上是JavaScript 如何實現圖片的上下滑動並加入縮放效果同時限制在容器內？的詳細內容。更多資訊請關注PHP中文網其他相關文章！