优化图片灯箱的体验
This commit is contained in:
1 parent
bd23826ce6
commit
f91be983d4
1 file changed
+46
@@ -5,6 +5,52 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
ViewImage.init('.post-content img');
|
ViewImage.init('.post-content img');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 灯箱增强:滚动关闭 + fade scale 退回动画
|
||||||
|
(function() {
|
||||||
|
var clickedImg = null;
|
||||||
|
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
var img = e.target.closest('.post-content img');
|
||||||
|
if (img) clickedImg = img;
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
function closeLightbox() {
|
||||||
|
var lb = document.querySelector('.view-image');
|
||||||
|
if (!lb) return;
|
||||||
|
|
||||||
|
// 用 UIkit 内置动画关闭
|
||||||
|
if (window.UIkit && UIkit.animate) {
|
||||||
|
UIkit.animate(lb, 'uk-animation-fade uk-animation-fast');
|
||||||
|
setTimeout(function() { lb.remove(); }, 300);
|
||||||
|
} else {
|
||||||
|
lb.classList.add('view-image__out');
|
||||||
|
setTimeout(function() { lb.remove(); }, 290);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 拦截关闭按钮
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
var lb = e.target.closest('.view-image');
|
||||||
|
if (!lb) return;
|
||||||
|
var isClose = e.target.closest('.view-image-close') || e.target.closest('.view-image-close__full');
|
||||||
|
if (!isClose) return;
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
closeLightbox();
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
// 滚动关闭
|
||||||
|
var lastScrollY = window.scrollY;
|
||||||
|
window.addEventListener('scroll', function() {
|
||||||
|
var lb = document.querySelector('.view-image');
|
||||||
|
if (!lb) { lastScrollY = window.scrollY; return; }
|
||||||
|
if (Math.abs(window.scrollY - lastScrollY) > 15) {
|
||||||
|
lastScrollY = window.scrollY;
|
||||||
|
closeLightbox();
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
})();
|
||||||
|
|
||||||
// 文章图片懒加载 (优先初始化,防止其他模块调用时出错)
|
// 文章图片懒加载 (优先初始化,防止其他模块调用时出错)
|
||||||
if (typeof lazyLoadInit === 'function') {
|
if (typeof lazyLoadInit === 'function') {
|
||||||
lazyLoadInit({
|
lazyLoadInit({
|
||||||
|
|||||||
Reference in new issue
Block a user