変換なしの幅と高さを使用してカーソル位置を拡大/縮小します

Question

Googleマップのようにズームイン/アウトを適用しようとしています - 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での作業の

、IはXを見つけるためoffsetXとoffsetYを使用した、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>