Javascript jQuery Panzoom插件定位图像位于右侧,包含:';倒置';
我正在尝试使用插件,这基本上是好的,除了 我希望首先缩放大图像以适应容器,并启用Javascript jQuery Panzoom插件定位图像位于右侧,包含:';倒置';,javascript,jquery,jquery.panzoom,Javascript,Jquery,Jquery.panzoom,我正在尝试使用插件,这基本上是好的,除了 我希望首先缩放大图像以适应容器,并启用contain:'invert'。我已经适应了图像首次加载时的缩放和定位 这很好,图像位于(窗口大小)容器的中心。但是如果我使用contain:'invert'作为平移选项,图像将位于右侧。我不明白为什么 你可以在这里看到它的作用: 以下是HTML/CSS: .zoom-container { width: 100%; height: 100%; position: fixed; top: 0;
contain:'invert'
。我已经适应了图像首次加载时的缩放和定位
这很好,图像位于(窗口大小)容器的中心。但是如果我使用contain:'invert'
作为平移选项,图像将位于右侧。我不明白为什么
你可以在这里看到它的作用:
以下是HTML/CSS:
.zoom-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
<div class="zoom-container">
<img class="zoom-img" src="https://farm8.staticflickr.com/7314/15854478283_d2667a7264_o.jpg">
</div>
我对javascript不太熟悉,但我也遇到了这个问题,并找到了这篇文章。这就是我所取得的成就,也许可以帮助别人
$('.zoom-img').panzoom({
// Causes image to appear aligned right:
contain: 'invert',
});
// Get container dimensions
var container_height = $('.zoom-container').height();
var container_width = $('.zoom-container').width();
// Get image dimensions
var image_height = $('.zoom-img').height();
var image_width = $('.zoom-img').width();
// Calculate the center of image since origin is at x:50% y:50%
var image_center_left = image_width / 2.0;
var image_center_top = image_height / 2.0;
// Calculate scaling factor
var zoom_factor;
// Check to determine whether to stretch along width or height
if(image_height > image_width) {
zoom_factor = container_height / image_height;
} else {
zoom_factor = container_width / image_width;
};
// Zoom by zoom_factor
$('.zoom-img').panzoom('option', 'minScale', zoom_factor);
$('.zoom-img').panzoom('zoom', zoom_factor, {animate: false});
// Calculate new image dimensions after zoom
image_width = image_width * zoom_factor;
image_height = image_height * zoom_factor;
// Calculate offset of the image after zoom
var image_offset_left = image_center_left - (image_width / 2.0);
var image_offset_top = image_center_top - (image_height / 2.0);
// Calculate desired offset for image
var new_offset_left = (container_width - image_width) / 2.0;
var new_offset_top = (container_height - image_height) / 2.0;
// Pan to set desired offset for image
var pan_left = new_offset_left - image_offset_left;
var pan_top = new_offset_top - image_offset_top;
$('.zoom-img').panzoom('pan', pan_left, pan_top);