JavaScript를 사용하여 이미지를 위아래로 슬라이드하고 확대/축소 효과를 추가하는 동시에 이미지를 컨테이너로 제한하는 방법은 무엇입니까?

JavaScript 이미지를 위아래로 슬라이드하고 컨테이너에 제한하면서 확대/축소 효과를 추가하는 방법은 무엇입니까?

현대 웹 디자인에서는 이미지에 대한 대화형 작업과 효과 향상을 수행해야 하는 경우가 많습니다. 그중에서도 사진의 위아래 슬라이딩 및 확대/축소 효과는 일반적인 요구 사항입니다. 이 기사에서는 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를 사용하여 이미지를 위아래로 슬라이드하고 확대/축소 효과를 추가하는 동시에 이미지를 컨테이너로 제한하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!