使用宽度和高度在光标位置放大/输出，而无需转换

Question

我正在尝试像在此处一样应用像Google Map一样应用Zoom -https：//www.google.com/maps/maps/@36.241201,-98.1261798,5.5.13Z？hl = 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

首先，请将 Zoom 应用于乘法系数。因此，对于200%缩放，将值设置为2。要缩小到半尺寸，将值设置为 0.5。

我使用offsetx和offsety而不是使用pageX和pageY，以查找单击的像素的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>