From 7c4c97d8a67ea1b63ee727bdf6db9941c2e7c41b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E9=B9=8F=E5=AE=87?= Date: Tue, 28 Jul 2026 22:41:39 +0800 Subject: [PATCH] fix: enter btn shadow/glow cleanup - remove halo layer effect --- index.html | 643 ++++++++--------------------------------------------- 1 file changed, 94 insertions(+), 549 deletions(-) diff --git a/index.html b/index.html index 2e5cd96..2441f87 100644 --- a/index.html +++ b/index.html @@ -12,383 +12,79 @@ @@ -408,7 +104,7 @@
-
+
@@ -416,92 +112,11 @@
LIVING CIVILIZATION SIMULATOR
活的文明系统模拟
+ +
- - - -
-
-
- -
-
- -
-
-
- - -
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- - -
-
-
-
- - -
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
- - -
-
- - -
-
- -
-
从左侧目录选择章节开始阅读
-
-
-
- - -
-
@@ -523,168 +138,98 @@ { img:'assets/slides/05_core.webp', en:'CORE', cn:'地心', desc:'熔岩奔流的地心，是世界诞生的本源。元玺在此凝聚，追溯天地初开的那一瞬永恒。', origin:'熔岩奔流处，乃世界本源所钟。元玺于亿载炽火中凝聚成形，溯天地初开一瞬，万物归处，亦是起始。' } ]; + const container = document.getElementById('slideshow'); - if(!container) return; + if (!container) return; let current = 0, timer = null; const INTERVAL = 5500; - // —— 预加载所有图片，消除切换闪烁 —— + // 预加载所有图（消除切换空白） slides.forEach(s => { const img = new Image(); img.src = s.img; }); + // 缩略图（保留兼容） const track = document.createElement('div'); - track.className='slide-track'; + track.className = 'slide-track'; container.appendChild(track); slides.forEach((s,i)=>{ const el = document.createElement('div'); - el.className='slide'+(i===0?' active':''); - el.style.backgroundImage="url('"+s.img+"')"; // 全部直接设置（已预加载） - el.innerHTML='
'+s.en+'
'+s.cn+'
'+s.desc+'
' - +'
起源'+s.origin+'
'; + el.className = 'slide' + (i===0 ? ' active' : ''); + el.style.backgroundImage = "url('" + s.img + "')"; + el.innerHTML = + '
' + s.en + '
' + s.cn + '
' + s.desc + '
' + + '
起源' + s.origin + '
'; track.appendChild(el); }); const all = track.querySelectorAll('.slide'); + // 指示器 const dotsWrap = document.createElement('div'); - dotsWrap.className='sl-dots'; + dotsWrap.className = 'sl-dots'; slides.forEach((_,i)=>{ - const d=document.createElement('div'); - d.className='sl-dot'+(i===0?' active':''); - d.addEventListener('click',()=>go(i)); + const d = document.createElement('div'); + d.className = 'sl-dot' + (i===0 ? ' active' : ''); + d.addEventListener('click', ()=> go(i)); dotsWrap.appendChild(d); }); document.querySelector('.hero').appendChild(dotsWrap); const dots = dotsWrap.querySelectorAll('.sl-dot'); + // 箭头按钮 + const prevBtn = document.getElementById('slPrev'); + const nextBtn = document.getElementById('slNext'); + if (prevBtn) prevBtn.addEventListener('click', ()=> { prev(); resetTimer(); }); + if (nextBtn) nextBtn.addEventListener('click', ()=> { next(); resetTimer(); }); + function go(idx){ - if(idx<0)idx=slides.length-1;if(idx>=slides.length)idx=0; - if(idx===current) return; - all[current].classList.remove('active');dots[current].classList.remove('active'); - current=idx; - track.style.transform='translateY('+(-current*100)+'%)'; - all[current].classList.add('active');dots[current].classList.add('active'); + if (idx<0) idx = slides.length-1; + if (idx>=slides.length) idx = 0; + if (idx === current) return; + all[current].classList.remove('active'); + dots[current].classList.remove('active'); + current = idx; + track.style.transform = 'translateY(' + (-current*100) + '%)'; + all[current].classList.add('active'); + dots[current].classList.add('active'); resetTimer(); } - function next(){ go((current+1)%slides.length); } - function prev(){ go((current-1+slides.length)%slides.length); } - function resetTimer(){ clearInterval(timer); timer=setInterval(next,INTERVAL); } + function next(){ go((current+1) % slides.length); } + function prev(){ go((current-1+slides.length) % slides.length); } + function resetTimer(){ clearInterval(timer); timer = setInterval(next, INTERVAL); } - // —— 滚轮 —— - let lock=false,wAccum=0; - document.querySelector('.hero').addEventListener('wheel',function(e){ - wAccum+=e.deltaY; - if(lock)return; - if(Math.abs(wAccum)>50){ - lock=true; - if(wAccum>0)next();else prev(); - wAccum=0; - setTimeout(function(){lock=false;},1250); + // 滚轮切换 + let lock = false, wAccum = 0; + document.querySelector('.hero').addEventListener('wheel', (e)=>{ + wAccum += e.deltaY; + if (lock) return; + if (Math.abs(wAccum) > 50){ + lock = true; + wAccum > 0 ? next() : prev(); + wAccum = 0; + setTimeout(()=> { lock=false; }, 1250); } - },{passive:true}); + }, {passive:true}); - // —— 触屏滑动 —— - let tx=0,ty=0; - const hero = document.querySelector('.hero'); - hero.addEventListener('touchstart',e=>{ - const t=e.touches[0]; - tx=t.clientX; ty=t.clientY; - },{passive:true}); - hero.addEventListener('touchend',e=>{ - const t=e.changedTouches[0]; - const dx=t.clientX-tx, dy=t.clientY-ty; - if(Math.abs(dy)>Math.abs(dx) && Math.abs(dy)>50){ - dy>0?prev():next(); - } - },{passive:true}); - - // —— 键盘左右 —— - document.addEventListener('keydown',e=>{ - if(e.key==='ArrowLeft')prev(); - if(e.key==='ArrowRight')next(); + // 键盘 + document.addEventListener('keydown', (e)=>{ + if (e.key === 'ArrowLeft') prev(); + if (e.key === 'ArrowRight') next(); }); - // —— 暴露给箭头按钮 —— - window.slPrev=prev; window.slNext=next; - // ============ 五层世界图片轮播 ============ - (function(){ - const slides = [ - { img:'assets/slides/01_starry_sky.png', en:'STARRY SKY', cn:'星空', desc:'陨石星空带悬浮于世界最外层，是文明触及维度的起点。星轨连通各浮空岛，穹鎏晶体自星尘中凝结。', - origin:'世界未形，星尘先于万物浮游于虚无。首缕维度自星隙坍缩成形，穹鎏晶体由尘凝就，文明自此仰望苍穹之始。' }, - { img:'assets/slides/02_sky.png', en:'SKY', cn:'天空', desc:'云朵地基块托起浮空岛群，灵气复苏的第一缕风拂过。各族初代聚落，在此仰望也更在此扎根。', - origin:'云基初结，浮空岛群自苍穹垂落凡尘。灵气复苏，初民循风而居，于云上筑城，仰望亦扎根，道统由此萌发。' }, - { img:'assets/slides/03_earth.png', en:'EARTH', cn:'大地', desc:'平原与森林铺展成万物生灵的摇篮，玄荒文明于斯鼎盛。城邦林立，征伐与道统在沃土上并行。', - origin:'沃野铺展为万灵摇篮，玄荒先族自林泉走出。城邦并起，征伐与道统并驰沃土之上，文明于此鼎盛绵延。' }, - { img:'assets/slides/04_underground.png',en:'UNDERGROUND',cn:'地下', desc:'溶洞晶矿与暗河在深处低语，冥玉生于幽暗玉石之中。地心工坊调度浅层资源，灯火不熄。', - origin:'溶洞深开，晶矿与暗河在幽处低语。冥玉生于幽玉深心，地心工坊取浅层之资，灯火长明，匠魂不熄。' }, - { img:'assets/slides/05_core.png', en:'CORE', cn:'地心', desc:'熔岩奔流的地心，是世界诞生的本源。元玺在此凝聚，追溯天地初开的那一瞬永恒。', - origin:'熔岩奔流处，乃世界本源所钟。元玺于亿载炽火中凝聚成形，溯天地初开一瞬，万物归处，亦是起始。' } - ]; - const container = document.getElementById('slideshow'); - if(!container) return; - let current = 0, timer = null; - const INTERVAL = 5500; - - // 竖向轨道：5 张图上下滑动 - const track = document.createElement('div'); - track.className='slide-track'; - container.appendChild(track); - - // 渲染 slide + label - slides.forEach((s,i)=>{ - const el = document.createElement('div'); - el.className='slide'+(i===0?' active':''); - el.style.backgroundImage="url('"+s.img+"')"; - el.innerHTML='
'+s.en+'
'+s.cn+'
'+s.desc+'
' - +'
起源'+s.origin+'
'; - track.appendChild(el); - }); - const all = track.querySelectorAll('.slide'); - - // 指示器 - const dotsWrap = document.createElement('div'); - dotsWrap.className='sl-dots'; - slides.forEach((_,i)=>{ - const d=document.createElement('div'); - d.className='sl-dot'+(i===0?' active':''); - d.addEventListener('click',()=>go(i)); - dotsWrap.appendChild(d); - }); - document.querySelector('.hero').appendChild(dotsWrap); - const dots = dotsWrap.querySelectorAll('.sl-dot'); - - function go(idx){ - if(idx<0)idx=slides.length-1;if(idx>=slides.length)idx=0; - if(idx===current) return; - all[current].classList.remove('active');dots[current].classList.remove('active'); - current=idx; - track.style.transform='translateY('+(-current*100)+'%)'; - all[current].classList.add('active');dots[current].classList.add('active'); - resetTimer(); + // 触屏 + const hero = document.querySelector('.hero'); + let tx=0, ty=0; + hero.addEventListener('touchstart', (e)=>{ + const t = e.touches[0]; + tx = t.clientX; ty = t.clientY; + }, {passive:true}); + hero.addEventListener('touchend', (e)=>{ + const t = e.changedTouches[0]; + const dx = t.clientX - tx, dy = t.clientY - ty; + if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 50){ + dy > 0 ? prev() : next(); } - function next(){ go((current+1)%slides.length); } - function prev(){ go((current-1+slides.length)%slides.length); } - function resetTimer(){ clearInterval(timer); timer=setInterval(next,INTERVAL); } - - // 鼠标滚轮上下滑动 - let lock=false,wAccum=0; - document.querySelector('.hero').addEventListener('wheel',function(e){ - wAccum+=e.deltaY; - if(lock)return; - if(Math.abs(wAccum)>50){ - lock=true; - if(wAccum>0)next();else prev(); - wAccum=0; - setTimeout(function(){lock=false;},1250); - } - },{passive:true}); - - resetTimer(); - })(); - - // ============ 程序化矢量缩略图（零 AI 生图，不消耗积分） ============ - function hashStr(s){let h=2166136261;for(let i=0;i>>0;} - function rng(seed){let s=seed>>>0;return function(){s=(Math.imul(s,1664525)+1013904223)>>>0;return s/4294967296;};} - const TIERCOL={'普通':'#9aa6c4','精良':'#5fd38a','稀有':'#4cc9f0','史诗':'#c77dff','传说':'#e7b85c'}; + }, {passive:true}); resetTimer(); })();