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

单击容器中的模态放大图像

1 个答案: