Question

我被指派制作图片放大并缩小javascript应用程序，但是有了可拖动的图像，当放大和缩小时，我必须保持容器的观察中心，在中心。我完成了所有计算的放大部分并保持左上比。用这个 http://jsfiddle.net/phHqQ/

$("#zoom").on("click", function (e) {
  var container = $("#container");
  var image = $("#container img");

  var css = {};
  css.height = image.height() + (image.height() * 0.2);
  css.width = image.width() + (image.width() * 0.2);

  var x = Math.abs(image.position().left) + container.width() / 2;
  var y = Math.abs(image.position().top) + container.height() / 2;
  var ratio = css.width / image.width();

  var newX = x * ratio;
  var newY = y * ratio;

  css.left = image.position().left - (newX - x);
  css.top = image.position().top - (newY - y);

  image.css(css);
});

请任何人都可以指导/制作缩小功能

Answer 1

您可以从放大功能开始，然后从缩小图像的高度开始。因此，不是添加到高度和宽度，而是从它们中减去。

css.height = image.height() - (image.height() * 0.2);
css.width = image.width() - (image.width() * 0.2);

一旦你这样做，缩小功能将开始工作，但很快你会发现，一旦你的尺寸小于原始尺寸，图像将开始形成左上边距。为防止出现这种情况，您需要检查缩小期间left和top值是否为正值。如果有，您可以将它们设置为0，这样无论如何图像都会移动到左上角。

css.left = css.left > 0 ? 0 : css.left;
css.top = css.top > 0 ? 0 : css.top;

随着您的继续，您会发现更多此类问题，您将不得不处理更多情况以防止利润增长。

这是一个小提琴：http://jsfiddle.net/phHqQ/261/

更新1

在放大时，基于容器的中心，图像的某些部分可能会从容器中出来，并且可能在容器的右下部分产生一些边缘。您可以在放大功能中添加这些验证，以确保在放大时，图像将保留在容器内。

if(css.height + css.top < 200){
  css.top = 200 - css.height;
}

if(css.width + css.left < 300) {
  css.left = 300 - css.width; 
}

以下是使用此代码更新的小提琴：http://jsfiddle.net/phHqQ/262/

缩小图像使观看中心保持在中心位置

1 个答案:

更新1