在容器内单击时，缩放模式中的图像

Question

我试图在模式中创建一个图像，在其容器中单击的位置进行缩放，但也要隐藏图像包装器溢出，这样图像的额外部分就不会向外扩展(就像亚马逊在缩放模式中的缩放https://www.amazon.com/gp/product/B01L8O0CRC)。

我已经搜索了SO，我的代码基于UPDATE 3：https://stackoverflow.com/a/27611642我做了一些修改，所以它使用了jQuery。

我遇到的问题是，当照片处于模态时，无论你点击哪里，它都会"向左平移"，但在模态之外，它工作得很好。它似乎也能在SO的弹出窗口中工作，但当我从HTML文件中运行整个程序时就不起作用了。

我还想在鼠标处于"缩放"模式时平移图像，但不确定如何做到这一点。

我之所以不使用第三方插件，是因为我有很多事情要做，没有一个插件能满足我的所有需求。

谢谢。

		$(document).ready(function(){
				var current = {x: 0, y: 0, zoom: 1};
	$(document).on("click","#modal-zoom-photo",function(e){
		
		if(current.zoom > 1){
			current = {x: 0, y: 0, zoom: 1};
			$(this).removeClass().addClass("zoom-in-cursor");
		}
		else{
			$(this).removeClass().addClass("zoom-out-cursor");
			 var coef = e.shiftKey || e.ctrlKey ? 0.5 : 2,
				delm = document.documentElement,
				oz = current.zoom,
				nz = current.zoom * coef,
				sx = delm.scrollLeft,
				sy = delm.scrollTop,
				ox = 50 + 21,
				oy = 50 + 22,
				mx = e.clientX - ox + sx,
				my = e.clientY - oy + sy,
				ix = (mx - current.x) / oz,
				iy = (my - current.y) / oz,
				nx = ix * nz,
				ny = iy * nz,
				cx = (ix + (mx - ix) - nx),
				cy = (iy + (my - iy) - ny)
			;
			  current.zoom = nz;
			  current.x = cx;
			  current.y = cy;
		}
			
		$(".modal-zoom-large-photo-wrap").css({
		  '-webkit-transform' : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
		  '-moz-transform'    : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
		  '-ms-transform'     : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
		  '-o-transform'      : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
		  'transform'         : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')'
		});
		return false;
	});
			
			
		});

	.modal-zoom-large-photo-wrap img{
		margin:0 auto;
		max-height:500px;
	}
	.modal-zoom-large-photo-wrap{
		text-align:center;
		height:520px;
		overflow:hidden;
		width: 100%;
	}
	
.wrapped{
position: relative;
width:500px;
	height:500px;
overflow:hidden;
}
.absolute{position: absolute;}
.modal-zoom-large-photo-wrap{
	position: absolute;
width: 100%;
height: 100%;
transform-origin: 0 0 0;
transition: transform 0.3s;
transition-timing-function: ease-in-out;
transform: translate(0,0) scale(1);
}
.zoom-out-cursor{
	cursor:zoom-out;
}
.zoom-in-cursor{
	cursor:zoom-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	 
	 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary btn-lg" data-toggle="modal">Open Modal</a>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">TITLE</h3>
</div>
<div class="modal-body">

		<div class="wrapped">
			<div class="modal-zoom-large-photo-wrap">
				<div class="absolute">
					<a id="modal-zoom-photo" class="zoom-in-cursor" href="#"><img class="margin-bottom img-responsive" src="https://placeimg.com/1024/640/animals"></a>
				</div>
			</div>
		</div>
</div>
</div>
</div>
</div>

Answer 1

我想好了，我需要找到容器的偏移量。

ox = offset.left,
oy = offset.top,

var offset = $(".modal-zoom-large-photo-wrap").offset();