Spaces:
Running
Running
File size: 3,022 Bytes
95c3513 f524f3e 95c3513 f524f3e 95c3513 f00581b 95c3513 f524f3e e17ebba f524f3e e17ebba f524f3e e17ebba f524f3e 9c27eec f524f3e 9c27eec f524f3e e17ebba f524f3e da47862 e17ebba 9c27eec f524f3e da47862 9c27eec f00581b 9c27eec da47862 9c27eec da47862 9c27eec da47862 9c27eec da47862 9c27eec da47862 9c27eec da47862 9c27eec da47862 9c27eec da47862 f524f3e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
document.addEventListener('DOMContentLoaded', () => {
// --- 區塊淡入動畫 ---
const sections = document.querySelectorAll('section');
const sectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, {
threshold: 0.05 // *** 降低觸發門檻，修復手機版底部區塊無法顯示問題 ***
});
sections.forEach(section => {
sectionObserver.observe(section);
});
// --- 回到頂部按鈕 ---
const backToTopButton = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.add('visible');
} else {
backToTopButton.classList.remove('visible');
}
});
// --- 導覽列高亮 ---
const navLinks = document.querySelectorAll('.nav-link');
const navObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${id}`) {
link.classList.add('active');
}
});
}
});
}, {
rootMargin: '-50% 0px -50% 0px'
});
document.querySelectorAll('section[id]').forEach(section => {
navObserver.observe(section);
});
// --- ★★★★★ 修正並簡化後的燈箱功能 ★★★★★ ---
document.body.addEventListener('click', function(event) {
// 檢查點擊的是否是帶有 .lightbox-trigger 的 <a> 標籤
const trigger = event.target.closest('.lightbox-trigger');
if (trigger) {
event.preventDefault(); // 阻止連結的默認跳轉行為
const imageUrl = trigger.getAttribute('href');
// 如果頁面上已經有燈箱，就不要再創建
if (document.querySelector('.lightbox')) {
return;
}
// 創建燈箱元素
const lightbox = document.createElement('div');
lightbox.className = 'lightbox';
lightbox.innerHTML = `<img src="${imageUrl}" alt="放大圖片">`;
// 將燈箱加入到 body
document.body.appendChild(lightbox);
// 監聽點擊燈箱本身以關閉
lightbox.addEventListener('click', () => {
lightbox.classList.add('closing');
setTimeout(() => {
if (document.body.contains(lightbox)) {
document.body.removeChild(lightbox);
}
}, 300); // 等待淡出動畫結束
});
}
});
});
|