const gradList = [
"linear-gradient(135deg,#ff6b9d,#7b5cff)",
"linear-gradient(135deg,#23c4f8,#06d6a0)",
"linear-gradient(135deg,#ffd166,#ff6b9d)",
"linear-gradient(135deg,#7b5cff,#23c4f8)",
"linear-gradient(135deg,#06d6a0,#ffd166)",
"linear-gradient(135deg,#ff9472,#ff6b9d)",
"linear-gradient(135deg,#a78bfa,#23c4f8)",
"linear-gradient(135deg,#f472b6,#7b5cff)",
"linear-gradient(135deg,#34d399,#059669)",
"linear-gradient(135deg,#fbbf24,#ea580c)",
"linear-gradient(135deg,#818cf8,#4338ca)",
"linear-gradient(135deg,#f87171,#be123c)",
"linear-gradient(135deg,#60a5fa,#1d4ed8)",
"linear-gradient(135deg,#a3e635,#65a30d)",
"linear-gradient(135deg,#c084fc,#7c3aed)",
"linear-gradient(135deg,#fb923c,#c2410c)",
"linear-gradient(135deg,#e879f9,#a21caf)",
"linear-gradient(135deg,#5eead4,#0f766e)",
"linear-gradient(135deg,#fda4af,#e11d48)",
"linear-gradient(135deg,#93c5fd,#1e40af)"
];
cmtData.forEach((c, i) => {
const avGrad = gradList[i % gradList.length];
cmtBox.insertAdjacentHTML('beforeend',
`
${c.n.charAt(0)}
${c.n}
${c.t}
${c.s}
${c.c}
`);
});
/* ============ 交互:回到顶部 + 导航高亮 ============ */
const topBtn = document.getElementById('top');
window.addEventListener('scroll', () => {
topBtn.style.display = window.scrollY > 400 ? 'block' : 'none';
// 导航滚动时加阴影
const header = document.querySelector('header');
if (window.scrollY > 10) {
header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.08)';
} else {
header.style.boxShadow = 'none';
}
});
topBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
/* 平滑滚动:菜单点击 */
document.querySelectorAll('.menu a').forEach(a => {
a.addEventListener('click', e => {
const href = a.getAttribute('href');
if (href.startsWith('#')) {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
});
});
/* 频道导航横向滚动:鼠标滚轮支持 */
const channelEl = document.querySelector('.channels');
channelEl.addEventListener('wheel', e => {
if (e.deltaY !== 0) {
e.preventDefault();
channelEl.scrollLeft += e.deltaY;
}
});
/* 搜索框回车提示 */
document.querySelectorAll('.search input, .hero .sbox input').forEach(input => {
input.addEventListener('keydown', e => {
if (e.key === 'Enter' && input.value.trim()) {
// 模拟搜索跳转(演示用)
const q = encodeURIComponent(input.value.trim());
// 实际使用时替换为真实搜索页
window.location.href = '/search?q=' + q;
}
});
});
/* 热门标签点击 */
document.querySelectorAll('.tags span').forEach(tag => {
tag.addEventListener('click', () => {
const q = encodeURIComponent(tag.textContent);
window.location.href = '/search?q=' + q;
});
});
/* 频道标签点击 */
document.querySelectorAll('.channels span').forEach(ch => {
ch.addEventListener('click', () => {
document.querySelectorAll('.channels span').forEach(s => s.style.background = '');
document.querySelectorAll('.channels span').forEach(s => s.style.color = '');
ch.style.background = 'linear-gradient(90deg, #23c4f8, #7b5cff)';
ch.style.color = '#fff';
ch.style.borderColor = 'transparent';
});
});
/* 卡片点击跳转(演示) */
document.querySelectorAll('.card .watch, .card .title-row').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
// 实际使用时替换为真实播放页
window.location.href = '/play?id=' + Math.random().toString(36).substr(2, 8);
});
});
/* 页面加载完成提示 */
window.addEventListener('load', () => {
console.log('%c🐱 黑猫动漫', 'font-size:20px;color:#ff6b9d;font-weight:bold;', '页面加载完成,所有模块已渲染');
});