How to use JavaScript to slide images up and down and add zoom effects while limiting them to the container?

JavaScript How to slide the image up and down and add a zoom effect while limiting it to the container?

In modern web design, it is often necessary to perform interactive operations and effect enhancement on images. Among them, the up and down sliding and zooming effects of pictures are common requirements. This article will introduce how to use JavaScript to achieve these effects, and limit it within the container.

1. Implementation of the up-and-down sliding effect

Achieving the up-and-down sliding effect of a picture mainly relies on mouse or touch events, and requires controlling the position of the picture.

First, in the HTML part, we create a container and an image element:

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

Then, in JavaScript, we need to add an event listener for the image element and respond based on mouse or touch events Change the position of the picture to move the position of the picture:

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

Through the above code, when the user presses the mouse or touches the screen, the initial position will be recorded, and as the mouse or finger moves, the position of the picture will change. It will also change accordingly. At the end of the operation, remove the event listener.

2. Implementation of the zoom effect

The realization of the zoom effect of the picture is based on the judgment of the position and gesture of the mouse or touch event. Here is an example of using gestures to determine zoom:

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

In the above code, when the finger starts to touch the screen, the initial gesture distance is recorded. When the finger moves, the zoom ratio is set by calculating the ratio of the current gesture distance to the initial gesture distance and applied to the image.

3. Restricted to the container

In order to ensure that the image slides and scales inside the container and does not overflow the container range, we need to make some position and size judgments.

First, in the CSS section, set the width and height of the container, and add styles to the container overflow: hidden; to hide the overflow content:

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

Then, in JavaScript , we need to determine whether the position and size of the image exceeds the boundaries of the container during the sliding and zooming process, and adjust it:

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

Through the above code, we will according to the size of the container and the size of the image, Calculate the minimum and maximum top values ​​and sizes, and make judgments and adjustments during the sliding and zooming process.

In summary, the up and down sliding of the image and the addition of zoom effects are implemented through JavaScript, and are limited to the container. The sliding effect is achieved through monitoring of mouse or touch events and calculation of position. Through the monitoring of gesture events and the calculation of distance, the zoom effect is achieved. By judging the position and size, the effect of being limited to the container is achieved.

The above is the detailed content of How to use JavaScript to slide images up and down and add zoom effects while limiting them to the container?. For more information, please follow other related articles on the PHP Chinese website!