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

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

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