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

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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;