如何在放大图像时消除图像上的随机跳跃

撤销应用于它的任何样式,看看这种功能是否受到开箱即用的支持,可能是值得的:

使用 barsSize 选项: https://photoswipe.com/documentation/options.html

或者 parseVerticalMargin 活动: https://photoswipe.com/documentation/api.html

我能够在图像的顶部和底部在 PhotoSwipe demo site 通过选择 All Controls 并添加以下样式以隐藏/禁用带有CSS的UI:

.pswp__ui {
    opacity: 0!important;
    pointer-events: none;
}

将其与 巴塞兹 选项应该允许您自定义图像和浏览器视口之间的间距,尽管您可能无法使用 vh 作为一个整体,需要使用 Math.round(window.innerHeight*.1) 计算10%的视图高度,或使用像素值。

这也是值得研究的问题 Custom HTML in Slides 文档中的主题,因为您可以添加间隔 div 在你的形象之前和之后。

对于仅限于CSS的修复:

如果你无法更改Photosweep的初始化方式,那么下面的CSS会让动画在你的网站上不那么跳跃,但是,它确实会让图像先达到全高,然后再转换到 90vh .

删除:

.pswp__scroll-wrap {
    height: 90vh !important;
}

加上:

.pswp__scroll-wrap {
    transition: transform 222ms cubic-bezier(.4,0,.22,1);
}

.pswp--animated-in .pswp__scroll-wrap {
    transform: scale(.9);
}

要解决反弹问题,请更改 height: 90vh !important 排在下面 .pswp__scroll-wrap 选择器到 100vh .就像这样:

.pswp__scroll-wrap {
    height: 100vh !important;
    margin: auto !important;
    top: 0 !important;
    bottom: 0 !important;
}

如果你还想在上面加衬垫;在移除弹跳缺陷的同时,缩小缩略图像(不用于滑块)以匹配全尺寸图像(通过滑块复制并放大)或在图像中添加某种填充。

另一个解决方法是在中添加填充块 .pswp__scroll-wrap:before 和 .pswp__scroll-wrap:after 就像这样:

.pswp__scroll-wrap:before,
.pswp__scroll-wrap:after {
    display: block;
    content: "":
    padding: 50px; // Set this to your preferred padding!
    background: #ffffff; // also add transition for background, so it fades in nicely!
}

我找不到在缩放之前定义幻灯片缩略图大小的代码,但我猜调整它的大小也有助于在没有反弹问题的情况下保持填充。

整个问题都围绕着你拥有这些 90vh 在包裹下,同时调整原始图像副本的大小。