// PC端全屏滚动逻辑 const pcContainer = document.getElementById('pcContainer'); const sections = document.querySelectorAll('.section'); const dots = document.querySelectorAll('.scroll-dots .dot'); const navbar = document.querySelector('.navbar'); const logo = document.querySelector('.section-1 .logo'); // 获取logo元素 let currentSection = 0; let isScrolling = false; // 全局变量:标记是否处于加载中状态 let isLoading = true; // 新增新闻加载状态标记 let isNewsLoaded = false; // 页面加载完成后初始化 window.addEventListener('DOMContentLoaded', async () => { // 初始化logo动画 const logo = document.querySelector('.section-1 .logo'); logo.classList.remove('active'); void logo.offsetHeight; logo.classList.add('active'); // 预加载角色切换图片 const roleImages = Object.values(roles).map(role => role.horizontal); roleImages.forEach(url => { const preloadImg = new Image(); preloadImg.src = url; }); // 预加载新闻 loadNews(); // 手动触发初始滚动逻辑,确保页脚显示 scrollToSection(currentSection); }); // 新闻加载函数(已调整部分) async function loadNews() { if (isNewsLoaded) return; // 避免重复加载 const newsContent = document.querySelector('.news-content'); const loadingEl = document.querySelector('.news-loading'); try { // 新增:清空现有新闻内容(防止重复加载) newsContent.innerHTML = ''; const response = await fetch('https://archive.ovofish.com/api/ui/user/admin/article/article_view.jsp?type=simple&tag=notice&quantity=4'); const data = await response.json(); loadingEl.style.display = 'none'; // 隐藏加载提示 data.slice(0, 5).forEach(item => { const newsItem = document.createElement('div'); newsItem.className = 'news-item'; const cleanLink = item.link.replace(/`/g, '').trim(); newsItem.innerHTML = `

${item.title}

${item.pubDate}:${item.description}

`; newsContent.appendChild(newsItem); }); isNewsLoaded = true; // 标记已加载 } catch (error) { loadingEl.textContent = '加载失败,请刷新重试'; console.error('新闻数据加载失败:', error); } } // 触发新闻项动画(逐个右渐入) function triggerNewsAnimation() { const newsItems = document.querySelectorAll('.news-item'); newsItems.forEach((item, index) => { setTimeout(() => { item.classList.add('active'); // 逐个添加激活类(间隔100ms) }, index * 250); }); } // 重置新闻项动画(离开时) function resetNewsAnimation() { const newsItems = document.querySelectorAll('.news-item'); newsItems.forEach(item => { item.classList.remove('active'); // 移除激活类,回到初始状态 }); } // 修改滚动逻辑,控制动画触发和重置 function scrollToSection(index) { if (isScrolling) return; isScrolling = true; currentSection = index; pcContainer.style.transform = `translateY(-${currentSection * 100}vh)`; // 更新导航点状态 dots.forEach((dot, i) => dot.classList.toggle('active', i === currentSection)); // 控制导航栏显示/隐藏(仅第一页隐藏) navbar.classList.toggle('hidden', currentSection === 0); // 控制页脚显示(仅第一页和最后一页) const footer = document.querySelector('.footer'); const isFirstOrLastPage = currentSection === 0 || currentSection === sections.length - 1; footer.classList.toggle('active', isFirstOrLastPage); // 新增:首页logo动画控制(关键修改) // 修改滚动逻辑中的logo动画控制部分 if (currentSection === 0) { // 进入首页时添加active类触发渐入 logo.classList.add('active'); } else { // 离开首页时移除active类触发渐出 logo.classList.remove('active'); } // 第二页动画控制(新增装饰图逻辑) const roleContainer = document.getElementById('roleContainer'); const staffDecoration = document.getElementById('staffDecoration'); // 获取装饰图元素 if (currentSection === 1) { setTimeout(() => { roleContainer.classList.add('active'); staffDecoration.classList.add('active'); // 进入第二页时激活动画 }, 300); } else { roleContainer.classList.remove('active'); staffDecoration.classList.remove('active'); // 离开时触发退出动画 } // 第三页(新闻页)逻辑(保留原有动画触发,但数据已预加载) if (currentSection === 2) { triggerNewsAnimation(); // 进入新闻页时触发动画(数据已预加载) } else { resetNewsAnimation(); // 离开新闻页时重置动画 } // 第三页新闻装饰图逻辑(新增) const newsDecoration = document.getElementById('newsDecoration'); if (currentSection === 2) { setTimeout(() => { newsDecoration.classList.add('active'); // 延迟300ms激活动画 }, 300); } else { newsDecoration.classList.remove('active'); } setTimeout(() => isScrolling = false, 600); } // 鼠标滚轮事件(修改) window.addEventListener('wheel', (e) => { if (window.innerWidth <= 768) return; // 手机端不触发 if (isLoading || isScrolling) return; // 关键修改:加载中或滚动中时禁止滚动 const delta = e.deltaY > 0 ? 1 : -1; currentSection = Math.max(0, Math.min(sections.length - 1, currentSection + delta)); scrollToSection(currentSection); }); // 导航点点击事件(修改) dots.forEach((dot, index) => { dot.addEventListener('click', () => { if (isLoading || isScrolling) return; // 关键修改:加载中或滚动中时禁止滚动 scrollToSection(index); }); }); // 角色切换逻辑 const roles = { default: { name: "Akatsuki Misaki", horizontal: "https://static-cos.ovofish.com/static/miraipip/img/XCDK1893.jpg", desc: "本站主要运营者,负责网站的运营管理,负责绝大部分功能组件开发,隶属于某个神秘组织,提供图片托管服务,助力萌新站长。", githubUrl: "https://github.com/akatsuki-misaki", githubText: "GITHUB.COM/Akatsuki-Misaki" }, costume: { name: "Yanam1Anna", horizontal: "https://static-cos.ovofish.com/static/miraipip/img/2BF88138E5D3FB086F90A0CEB84BC475.jpg", desc: "NekoPara在线补丁下载一键包作者,为本站加密鉴权方案提供帮助,本站鉴权组件维护者,作为回礼本站提供校验下载服务,列为本站的合作伙伴。", githubUrl: "https://github.com/yanam1anna", githubText: "GITHUB.COM/YANAM1ANNA" }, holiday: { name: "LiSHang999", horizontal: "https://img-bohe.lolicon.team/i/img/img-cdn/tu1.jpg", desc: "UI设计者,提供主题色彩以及界面设计建议,为本站提供视觉设计参考,列为本站的合作伙伴。", githubUrl: "https://github.com/lishang999", githubText: "GITHUB.COM/LiSHang999" } }; document.querySelectorAll('.role-btn').forEach(btn => { btn.addEventListener('click', () => { const role = roles[btn.dataset.role]; const roleName = document.getElementById('roleName'); const roleHorizontal = document.getElementById('roleHorizontal'); const roleDesc = document.getElementById('roleDesc'); const roleUrlLink = document.querySelector('.role-url a'); // 获取超链接元素 // 1. 执行渐出动画(包含超链接文字) roleName.style.opacity = '0'; roleHorizontal.style.opacity = '0'; roleDesc.style.opacity = '0'; roleUrlLink.style.opacity = '0'; // 新增:超链接文字渐出 // 2. 等待渐出完成 setTimeout(() => { // 3. 更新内容(包含超链接文字) roleName.innerHTML = `${role.name}`; roleHorizontal.src = role.horizontal; roleDesc.innerHTML = role.desc; roleUrlLink.href = role.githubUrl; roleUrlLink.textContent = role.githubText; // 关键修改:更新文字内容 // 4. 执行渐入动画(包含超链接文字) roleName.style.opacity = '1'; roleHorizontal.style.opacity = '1'; roleDesc.style.opacity = '1'; roleUrlLink.style.opacity = '1'; // 新增:超链接文字渐入 }, 300); }); }); // 页面加载完成后执行加载动画 (已调整部分) window.onload = function () { setTimeout(function () { setTimeout(loadingAnime1, 1000); setTimeout(loadingAnime2, 2000); setTimeout(loadingDisableAnime, 4000); setTimeout(loadingDisable, 6000); }, 100); }; function loadingDisableAnime() { document.querySelector('#loading').classList.add('disable'); setTimeout(function () { // 新增:加载动画结束后显示页脚 const footer = document.querySelector('.footer'); if (footer) { // 手动添加active类触发页脚显示(与滚动逻辑兼容) footer.classList.add('active'); } }, 500); } function loadingDisable() { document.querySelector('#loading').style.display = 'none'; isLoading = false; // 加载完成,允许滚动 } function loadingAnime1() { document.querySelector('#logo').classList.add('logomove'); } function loadingAnime2() { document.querySelector('#RTXT').classList.add('opcy1'); document.querySelector('#RTXT').classList.remove('opcy0'); //隐藏页脚 const footer = document.querySelector('.footer'); if (footer) { footer.classList.remove('active'); // 移除active类 } } function jumppage() { window.location.href = '/'; } // 延迟3s执行 setTimeout(function() { console.log("%c Heartfelt %c", "background-image: linear-gradient(195deg, #169af8 0%, #16e6f8 100%); color:#ffffff", "", "或许这里未来会成为中文互联网为数不多的净土吧"); }, 3000);