Wie verwende ich JavaScript, um Bilder nach oben und unten zu verschieben und Zoomeffekte hinzuzufügen, während ich sie auf den Container beschränke?

JavaScript Wie schiebe ich das Bild nach oben und unten und füge einen Zoomeffekt hinzu, während ich es auf den Container beschränke?

Im modernen Webdesign ist es oft notwendig, interaktive Vorgänge durchzuführen und Bilder zu verbessern. Darunter sind das Auf- und Abgleiten und Zoomen von Bildern gängige Anforderungen. In diesem Artikel wird erläutert, wie Sie mit JavaScript diese Effekte erzielen und sie innerhalb des Containers einschränken.

1. Implementierung des Auf- und Ab-Gleiteffekts

Die Realisierung des Auf- und Ab-Gleiteffekts von Bildern basiert hauptsächlich auf Maus- oder Berührungsereignissen und erfordert die Steuerung der Position des Bildes.

Zuerst erstellen wir im HTML-Teil einen Container und ein Bildelement:

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

Dann müssen wir in JavaScript dem Bildelement einen Ereignis-Listener hinzufügen und das Bild basierend auf der Positionsänderung der Maus oder verschieben Berührungsereignis Position:

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

Wenn der Benutzer mit der Maus drückt oder den Bildschirm berührt, wird durch den obigen Code die Anfangsposition aufgezeichnet, und wenn sich die Maus oder der Finger bewegt, ändert sich auch die Position des Bildes. Entfernen Sie am Ende des Vorgangs den Ereignis-Listener.

2. Implementierung des Zoomeffekts

Die Realisierung des Zoomeffekts des Bildes basiert auf der Beurteilung der Position und Geste des Maus- oder Berührungsereignisses. Hier ist ein Beispiel für die Verwendung von Gesten zur Bestimmung des Zooms:

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

Im obigen Code wird der anfängliche Gestenabstand aufgezeichnet, wenn der Finger beginnt, den Bildschirm zu berühren. Wenn sich der Finger bewegt, wird das Zoomverhältnis durch Berechnen des Verhältnisses des aktuellen Gestenabstands zum anfänglichen Gestenabstand festgelegt und auf das Bild angewendet.

3. Beschränkt auf den Container

Um sicherzustellen, dass das Bild im Container gleitet und skaliert und nicht über den Container hinausläuft, müssen wir einige Positions- und Größenbeurteilungen vornehmen.

Legen Sie zunächst im CSS-Teil die Breite und Höhe des Containers fest und fügen Sie dem Container Stile hinzu overflow: hidden;, um den Überlaufinhalt auszublenden:

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

Dann müssen wir in JavaScript die Position und Position des Bildes bestimmen Ob die Größe die Grenze des Containers überschreitet und anpassen:

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

Mit dem obigen Code berechnen wir den minimalen und maximalen oberen Wert und die Größe basierend auf der Größe des Containers und der Größe des Bildes und während des Prozesses des Gleitens und Skalierens beurteilen und anpassen.

Zusammenfassend lässt sich sagen, dass das Auf- und Abwärtsverschieben des Bildes und das Hinzufügen von Zoomeffekten über JavaScript implementiert werden und auf den Container beschränkt sind. Der Gleiteffekt wird durch die Überwachung von Maus- oder Berührungsereignissen und die Berechnung der Position erreicht. Durch die Überwachung von Gestenereignissen und die Berechnung der Entfernung wird der Zoomeffekt erreicht. Durch die Beurteilung der Position und Größe wird der Effekt der Beschränkung auf den Behälter erreicht.

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um Bilder nach oben und unten zu verschieben und Zoomeffekte hinzuzufügen, während ich sie auf den Container beschränke?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!