Files
donsen/assets/js/main.js
T
admin 59607097c7 东燊科技(Donsen)宣传网页:中英双语单页站 + 未来科技感视觉系统
- 单页双语站:data-lang 切换中/英,全站内容双语文案
- Hero 不对称双栏:左文案列(eyebrow/标题/渐变 slogan/CTA/数据条)+ 右凤凰视觉舱(深色玻璃 HUD + 能量轨道环 + 均衡器脉冲)
- 视觉系统 fx.css/fx.js(与 main.js 解耦):深空星野/鼠标聚光/自定义光标/点击爆炸/卡片 3D 倾斜/数字滚动;?static=1、prefers-reduced-motion、触屏自动降级
- 产品矩阵四段式结构(痛点→方案→场景→效益),四条产品线全部真实截图(WebP + PNG 兜底)
- 顶栏/页脚透明凤凰标识(phoenix.webp/png),去白底
- 部署配套:404.html、_headers、nginx.conf、robots.txt、favicon/apple-touch-icon/og-cover
- 性能基线:总传输约 153KB、CLS 0、CDP 两套取证套件全绿
2026-10-19 23:13:30 +08:00

103 lines
3.9 KiB
JavaScript

/* 东燊科技 Donsen — 交互脚本 */
(function () {
'use strict';
/* ---------- 语言切换(默认中文,记忆选择) ---------- */
var body = document.body;
var toggle = document.getElementById('langToggle');
var optZh = document.querySelector('.lang-zh');
var optEn = document.querySelector('.lang-en');
function applyLang(lang) {
body.setAttribute('data-lang', lang);
document.documentElement.setAttribute('lang', lang === 'zh' ? 'zh-CN' : 'en');
if (optZh) optZh.classList.toggle('is-active', lang === 'zh');
if (optEn) optEn.classList.toggle('is-active', lang === 'en');
try { localStorage.setItem('donsen-lang', lang); } catch (e) {}
}
var params = new URLSearchParams(location.search);
var saved = null;
try { saved = params.get('lang') || localStorage.getItem('donsen-lang'); } catch (e) {}
applyLang(saved === 'en' ? 'en' : 'zh');
if (toggle) {
toggle.addEventListener('click', function () {
applyLang(body.getAttribute('data-lang') === 'zh' ? 'en' : 'zh');
});
}
/* ---------- 移动端菜单 ---------- */
var burger = document.getElementById('navBurger');
var links = document.getElementById('navLinks');
if (burger && links) {
burger.addEventListener('click', function () {
links.classList.toggle('open');
});
links.querySelectorAll('a').forEach(function (a) {
a.addEventListener('click', function () { links.classList.remove('open'); });
});
}
/* ---------- 滚动高亮导航(rAF 节流 + offsetTop 缓存,滚动帧内零强制布局) ---------- */
var navEl = document.getElementById('nav');
var sections = Array.prototype.slice.call(document.querySelectorAll('section[id]'));
var navLinks = Array.prototype.slice.call(document.querySelectorAll('.nav-link'));
var sectionTops = [];
function measureTops() {
sectionTops = sections.map(function (s) { return s.getBoundingClientRect().top + window.scrollY; });
}
var scrollTick = false;
function onScrollFrame() {
scrollTick = false;
var y = window.scrollY;
var scrolled = y > 40;
if (navEl) {
navEl.style.background = scrolled ? 'rgba(6,15,34,.96)' : 'rgba(6,15,34,.82)';
// 滚动后切纯色背景并去掉毛玻璃(backdrop-filter 持续混合开销大)
navEl.classList.toggle('scrolled', scrolled);
}
var current = sections[0] ? sections[0].id : '';
for (var i = 0; i < sectionTops.length; i++) {
if (sectionTops[i] <= y + 120) current = sections[i].id;
}
navLinks.forEach(function (l) {
l.classList.toggle('active', l.getAttribute('href') === '#' + current);
});
}
function onScroll() {
if (scrollTick) return;
scrollTick = true;
requestAnimationFrame(onScrollFrame);
}
measureTops();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', function () { measureTops(); onScrollFrame(); });
onScrollFrame();
/* ---------- 滚动显现动画(?static=1 或减弱动效时直接全展) ---------- */
var revealEls = document.querySelectorAll('.reveal');
var staticMode = new URLSearchParams(location.search).get('static') === '1';
var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (staticMode || reduceMotion || !('IntersectionObserver' in window)) {
revealEls.forEach(function (el) { el.classList.add('in'); });
} else {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
en.target.classList.add('in');
io.unobserve(en.target);
}
});
}, { threshold: 0.12 });
revealEls.forEach(function (el) { io.observe(el); });
}
/* ---------- 页脚年份 ---------- */
var y = new Date().getFullYear();
['year', 'year-en'].forEach(function (id) {
var el = document.getElementById(id);
if (el) el.textContent = y;
});
})();