JavaScript を使用して画像を上下にスライドさせ、コンテナ内に限定しながらズーム効果を追加するにはどうすればよいですか?

JavaScript 画像を上下にスライドさせ、コンテナ内に限定してズーム効果を追加するにはどうすればよいですか?

現代の Web デザインでは、多くの場合、画像に対してインタラクティブな操作やエフェクトの強化を実行する必要があります。その中で、写真の上下スライドやズーム効果は共通の要件です。この記事では、JavaScript を使用してこれらの効果を実現し、コンテナ内で制限する方法を紹介します。

1. 上下のスライド効果の実装

画像の上下のスライド効果を実現するには、主にマウスまたはタッチ イベントに依存し、位置を制御する必要があります。絵。

まず、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;
}

上記のコードにより、ユーザーがマウスを押すか画面に触れると、初期位置が記録され、マウスや指を動かすと画像の位置が変わり、それに合わせて画像も変わります。操作の終了時に、イベント リスナーを削除します。

2. ズーム効果の実装

画像のズーム効果の実現は、マウスまたはタッチ イベントの位置とジェスチャーの判断に基づいています。ジェスチャを使用してズームを決定する例を次に示します。

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

上記のコードでは、指が画面に触れ始めると、最初のジェスチャ距離が記録されます。指が動くと、現在のジェスチャ距離と最初のジェスチャ距離の比率を計算してズーム率が設定され、画像に適用されます。

3. コンテナに制限

画像がコンテナ内でスライドおよびスケールし、コンテナ範囲からはみ出さないようにするには、位置とサイズをいくつか判断する必要があります。

まず、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';
}

上記のコードにより、次のようになります。コンテナのサイズと画像のサイズに応じて、上部の最小値と最大値とサイズを計算し、スライドとズームのプロセス中に判断と調整を行います。

要約すると、画像の上下スライドとズーム効果の追加は JavaScript によって実装され、コンテナーに限定されます。スライド効果は、マウスまたはタッチ イベントの監視と位置の計算によって実現されます。ジェスチャ イベントの監視と距離の計算により、ズーム効果が実現されます。位置や大きさを判断することで、コンテナに限定した効果が得られます。

以上がJavaScript を使用して画像を上下にスライドさせ、コンテナ内に限定しながらズーム効果を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。