我正在尝试以模态形式显示图像,在其容器内的单击位置处进行缩放,但也要隐藏图像包装,因此图像的多余部分不会伸出(例如亚马逊的缩放)在缩放模式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>
答案 0 :(得分:0)
我想通了,我需要找到容器的偏移量。
ox = offset.left,
oy = offset.top,
var offset = $(".modal-zoom-large-photo-wrap").offset();