优化图片灯箱的体验
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');
|
||||
}
|
||||
|
||||
// 灯箱增强:滚动关闭 + 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') {
|
||||
lazyLoadInit({
|
||||
|
||||
Reference in new issue
Block a user