網頁跑馬燈Marquee的替代方案使用css動畫達成

 

由於marquee tag 已經過時此物在一些主流瀏覽器上也常遇到怎麼沒有跑馬燈效果

所以這裡筆記一下解決替代方案

marquee在之後瀏覽器html tag語法中已算過時了

https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/marquee

因此這裡建議使用最新css3  animation方案

在開始style 定義css樣式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style> .news_marquee { animation : slide 7s linear infinite ; color:white; } @keyframes slide { 0% { transform: translatex(0%) } 100% { transform: translatex(100%) } } </style>

在要顯示跑馬燈效果的地方div包覆(class name記得套用樣式才吃的到)

這裡假設是在使用bootstrap container row 的情境

建議要在最外層再包一個div且這個div的style要設定overflow:hidden;

padding就隨意

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="container"> <div class="row"> <div class="col-12" style="padding: 0.5rem;overflow: hidden;"> <% marquee_data[0].forEach(item=>{%> <!-- <marquee id="marquee_block" style="font-size:30pt" direction="left" height="30" scrollamount="8" onmousedown="this.stop();" onmouseup="this.start();">item.marq_main_info</marquee> --> <% marquee_data[1].forEach(item1=>{%> <% marquee_data[2].forEach(item2=>{%> <div class="news_marquee" style="font-size:<%=item1.sd_item_val%>pt;color:<%=item2.sd_item_val%>"><%=item.marq_main_info%></div> <% }) %> <% }) %> <% }) %> </div> </div> </div>

效果

css keyframe關鍵影格語法筆記

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@keyframes 動畫名稱 { 關鍵影格選擇器1 { 眾多css樣式; } 關鍵影格選擇器2 { 眾多css樣式; } ... } 0 ~ 100%或者from、to ： 在時間的幾%時為何種css樣式，from(等同於0%)、to(等同於100%) animation-name: 動畫名稱; animation-duration: 動畫作用時間; animation-timing-function: 動畫補間時運用的計算公式; animation-delay: 動畫需間隔多久後才開始; animation-iteration-count: 動畫作用次數; animation-direction: 動畫作用的方向;

類似Flash當中的關鍵影格，在動畫內建立各個位置的時候，對應的css樣式為何，

最後就交給瀏覽器去做補間效果。

Ref:

https://www.oxxostudio.tw/articles/201803/css-animation.html

https://dotblogs.com.tw/knightzone/2013/09/07/116716