javascript - 使用不带变换的宽度和高度在光标位置放大/缩小

Question

我正在尝试像此处一样应用 Google map 的放大/缩小 - https://www.google.com/maps/@36.241201,-98.1261798,5.13z?hl=en我无法让它正常工作。

我一直在寻找解决方案。但它们都是基于 CSS Tansform 的，我无法使用。

var $image = $('#image');
var container_height = $('#container').height();
var container_width = $('#container').width();

$image.width(container_width);

$('#container').on('click', function(e){
  var zoom = 100;
  e.preventDefault();
  var this_offset = $(this).offset(); 
  var click_x = e.pageX - this_offset.left;
  var click_y = e.pageY - this_offset.top;

  var image_height = $image.height();
  var image_width = $image.width();

  $image.css({
    'width' : image_width + zoom,
    'height' : image_height + zoom,
    'top': -click_y,
    'left': -click_x,
  });
});

.container{
  margin: 15px auto;
  position:relative;
  width:400px;
  height: 300px;
  border: 2px solid #fff;
  overflow:hidden;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.image{
  position:absolute;
  transition:all 0.25s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="container">
  <img src="https://i.imgur.com/sEUlGOw.jpg" id="image" class="image" />
</div>

请帮助。谢谢

Answer 1

首先，请将缩放用作倍增因子。因此，对于 200% 缩放，将值设置为 2。要缩小到一半大小，请将值设置为 0.5。

我没有使用 pageX 和 pageY，而是使用了 offsetX和 offsetY找到被点击的像素的 x, y 坐标。 (请注意兼容性)。

为了在容器中找到图像的左侧和顶部，我使用了 offsetLeft和 offsetTop .

(function () {
    var $image = $('#image');

    var container_width = $('#container').width();

    $image.width(container_width);

    $image.on('click', function(e){
        var zoom = 1.3; // zoom by multiplying a factor for equal width n height proportions
        e.preventDefault();
        var click_pixel_x = e.offsetX,
            click_pixel_y = e.offsetY;

        var image_width = $image.width(),
            image_height = $image.height();

        var current_img_left = this.offsetLeft,
            current_img_top = this.offsetTop;

        var new_img_width = image_width * zoom,
            //new_img_height = image_height * zoom,
            img_left = current_img_left + click_pixel_x - (click_pixel_x * zoom),
            img_top = current_img_top + click_pixel_y - (click_pixel_y * zoom);

        $image.css({
            'width' : new_img_width,
            //'height' : new_img_height,
            'left': img_left,
            'top': img_top
        });
    });
})(jQuery);

.container{
        margin: 15px auto;
        position:relative;
        width:400px;
        height: 300px;
        border: 2px solid #fff;
        overflow:hidden;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

.image{
    position:absolute;
    left: 0,
    top: 0,
    transition:all 0.25s ease-in-out;
}

<div class="container" id="container">
<img src="https://i.imgur.com/sEUlGOw.jpg" id="image" class="image" />
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>