代码之家 › 专栏 › 技术社区 › imvain2

在容器内单击时以模式放大图像

twitter-bootstrap-3 jquery

imvain2 · 技术社区 · 7 年前

我试着在一个模式中有一个图像,在它被点击的位置缩放它的容器,但是图像包装器也隐藏了溢出,这样图像的额外部分就不会向外扩展(就像亚马逊在缩放模式中的缩放 https://www.amazon.com/gp/product/B01L8O0CRC )

我已经搜索了so,我的代码基于更新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>

1 回复 | 直到 7 年前

imvain2 7 年前

我想出来了,我需要找到容器的偏移量。

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

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