公告訊息
官網跑馬燈
官網跑馬燈
<section aria-label="最新消息輪播" id="newsTicker" role="region" style="
width:100%;
overflow:hidden;
border-radius:8px;
padding:0.4em 0.6em;
background: linear-gradient(90deg, #fff8e1, #fffde7);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
display:flex;
align-items:center;
gap:0.5em;
"><button aria-label="停止輪播" aria-pressed="false" id="togglePlay" style="
flex:0 0 auto;
border:none;
background:#333;
color:#fff;
border-radius:4px;
padding:0.25em 0.6em;
font-size:0.9rem;
cursor:pointer;
">⏸</button>
<ul aria-live="polite" id="newsList" role="list" style="
list-style:none;
padding:0;
margin:0;
position:relative;
min-height:2.6em;
text-align:center;
font-weight:700;
color:#333;
line-height:1.5;
flex:1 1 auto;
cursor:pointer;
overflow:hidden;
" tabindex="0"><!-- 第1則 -->
<li role="listitem" style="
position:relative;
width:100%;
opacity:1;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
"><a href="https://www.kkes.ntpc.edu.tw/p/404-1000-7235.php" style="text-decoration:none;color:inherit;display:block;width:100%;" title="教育報告與創新支持系統問卷調查">📊 教育報告與創新支持系統問卷調查 </a></li>
<!-- 第2則 -->
<li role="listitem" style="
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
">賀武術隊參加「新北市114學年度中小學武術錦標賽」榮獲國小組團體總錦標第一名！</li>
<!-- 第3則 -->
<li role="listitem" style="
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
"><a href="https://www.kkes.ntpc.edu.tw/p/406-1000-7261,r50.php" style="text-decoration:none;color:inherit;display:block;width:100%;" title="115年4月10日至6月30日舉辦114年農林漁牧業普查">📊 115年4月10日至6月30日舉辦114年農林漁牧業普查 </a></li>
<!-- 第4則 -->
<li role="listitem" style="
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
">✨ 恭喜「板橋你是咱的寶貝」獲新北說唱讚 閩中組、人氣獎雙料冠軍</li>
</ul>
</section>
<script>
(function () {
const ticker = document.getElementById('newsTicker');
const list = document.getElementById('newsList');
const btn = document.getElementById('togglePlay');
const items = list.querySelectorAll('li');
if (items.length <= 1) return;
let index = 0;
let timer = null;
let playing = true;
const intervalTime = 4500;
function show(i){
items.forEach((item,idx)=>{
if(idx===i){
item.style.opacity="1";
item.style.position="relative";
item.style.zIndex="1";
}else{
item.style.opacity="0";
item.style.position="absolute";
item.style.zIndex="0";
}
});
}
function next(){
index=(index+1)%items.length;
show(index);
}
function start(){
if(timer) return;
timer=setInterval(next,intervalTime);
playing=true;
}
function stop(){
clearInterval(timer);
timer=null;
playing=false;
}
start();
/* 滑鼠停留暫停 */
ticker.addEventListener('mouseenter',stop);
ticker.addEventListener('mouseleave',()=>{
if(btn.getAttribute('aria-pressed')==='false') start();
});
/* 點擊切換 (但不干擾連結) */
list.addEventListener('click',e=>{
if(e.target.closest('a')) return;
next();
});
/* 鍵盤操作 */
list.addEventListener('keydown',e=>{
if(e.key==="Enter"||e.key===" "){
e.preventDefault();
next();
}
});
/* 播放控制 */
btn.addEventListener('click',()=>{
if(playing){
stop();
btn.textContent="▶";
btn.setAttribute('aria-label','開始輪播');
btn.setAttribute('aria-pressed','true');
}else{
start();
btn.textContent="⏸";
btn.setAttribute('aria-label','停止輪播');
btn.setAttribute('aria-pressed','false');
}
});
/* 自動字體大小 */
function resizeText(){
const w=ticker.offsetWidth;
const size=Math.max(14,Math.min(22,w/18));
items.forEach(i=>i.style.fontSize=size+"px");
}
window.addEventListener('resize',resizeText);
resizeText();
})();
</script>
width:100%;
overflow:hidden;
border-radius:8px;
padding:0.4em 0.6em;
background: linear-gradient(90deg, #fff8e1, #fffde7);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
display:flex;
align-items:center;
gap:0.5em;
"><button aria-label="停止輪播" aria-pressed="false" id="togglePlay" style="
flex:0 0 auto;
border:none;
background:#333;
color:#fff;
border-radius:4px;
padding:0.25em 0.6em;
font-size:0.9rem;
cursor:pointer;
">⏸</button>
<ul aria-live="polite" id="newsList" role="list" style="
list-style:none;
padding:0;
margin:0;
position:relative;
min-height:2.6em;
text-align:center;
font-weight:700;
color:#333;
line-height:1.5;
flex:1 1 auto;
cursor:pointer;
overflow:hidden;
" tabindex="0"><!-- 第1則 -->
<li role="listitem" style="
position:relative;
width:100%;
opacity:1;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
"><a href="https://www.kkes.ntpc.edu.tw/p/404-1000-7235.php" style="text-decoration:none;color:inherit;display:block;width:100%;" title="教育報告與創新支持系統問卷調查">📊 教育報告與創新支持系統問卷調查 </a></li>
<!-- 第2則 -->
<li role="listitem" style="
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
">賀武術隊參加「新北市114學年度中小學武術錦標賽」榮獲國小組團體總錦標第一名！</li>
<!-- 第3則 -->
<li role="listitem" style="
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
"><a href="https://www.kkes.ntpc.edu.tw/p/406-1000-7261,r50.php" style="text-decoration:none;color:inherit;display:block;width:100%;" title="115年4月10日至6月30日舉辦114年農林漁牧業普查">📊 115年4月10日至6月30日舉辦114年農林漁牧業普查 </a></li>
<!-- 第4則 -->
<li role="listitem" style="
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
transition:opacity .8s ease;
padding:.3em .6em;
box-sizing:border-box;
">✨ 恭喜「板橋你是咱的寶貝」獲新北說唱讚 閩中組、人氣獎雙料冠軍</li>
</ul>
</section>
<script>
(function () {
const ticker = document.getElementById('newsTicker');
const list = document.getElementById('newsList');
const btn = document.getElementById('togglePlay');
const items = list.querySelectorAll('li');
if (items.length <= 1) return;
let index = 0;
let timer = null;
let playing = true;
const intervalTime = 4500;
function show(i){
items.forEach((item,idx)=>{
if(idx===i){
item.style.opacity="1";
item.style.position="relative";
item.style.zIndex="1";
}else{
item.style.opacity="0";
item.style.position="absolute";
item.style.zIndex="0";
}
});
}
function next(){
index=(index+1)%items.length;
show(index);
}
function start(){
if(timer) return;
timer=setInterval(next,intervalTime);
playing=true;
}
function stop(){
clearInterval(timer);
timer=null;
playing=false;
}
start();
/* 滑鼠停留暫停 */
ticker.addEventListener('mouseenter',stop);
ticker.addEventListener('mouseleave',()=>{
if(btn.getAttribute('aria-pressed')==='false') start();
});
/* 點擊切換 (但不干擾連結) */
list.addEventListener('click',e=>{
if(e.target.closest('a')) return;
next();
});
/* 鍵盤操作 */
list.addEventListener('keydown',e=>{
if(e.key==="Enter"||e.key===" "){
e.preventDefault();
next();
}
});
/* 播放控制 */
btn.addEventListener('click',()=>{
if(playing){
stop();
btn.textContent="▶";
btn.setAttribute('aria-label','開始輪播');
btn.setAttribute('aria-pressed','true');
}else{
start();
btn.textContent="⏸";
btn.setAttribute('aria-label','停止輪播');
btn.setAttribute('aria-pressed','false');
}
});
/* 自動字體大小 */
function resizeText(){
const w=ticker.offsetWidth;
const size=Math.max(14,Math.min(22,w/18));
items.forEach(i=>i.style.fontSize=size+"px");
}
window.addEventListener('resize',resizeText);
resizeText();
})();
</script>