266 lines
10 KiB
JavaScript
266 lines
10 KiB
JavaScript
// 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 = `
|
||
<h3><a href="${cleanLink}" target="_blank">${item.title}</a></h3>
|
||
<p>${item.pubDate}：${item.description}</p>
|
||
`;
|
||
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 = `<a href="${role.githubUrl}" target="_blank">${role.name}</a>`;
|
||
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); |